* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
box-sizing: border-box;
overflow-x: hidden;
font-family: "Lato", sans-serif;
color: #000000;
background-color: #ffffff;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
}
a:focus {
outline: none;
}
p {
margin-bottom: 0;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
p:not(:last-of-type) {
margin-bottom: 15px;
}
.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
background-color: #FFFFFF;
z-index: 999;
}
.site-header.head-sticky {
-webkit-animation: .7s ease-in-out fadeInDown;
animation: .7s ease-in-out fadeInDown;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
left: 0;
-webkit-transition: .3s;
transition: .3s;
}
.site-header .container {
padding-right: 20px !important;
}
.site-header.head-sticky .container {
padding-right: 30px !important;
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0)
}
100% {
opacity: 1;
-webkit-transform: translateZ(0);
transform: translateZ(0)
}
}
.site-header .main-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.site-header .main-header .main-nav ul {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.site-header .main-header .brand-logo {
max-width: 170px;
}
.site-header .main-header .main-nav ul li {
padding: 30px 0px;
position: relative;
}
.site-header .main-header .main-nav ul>li>a {
display: flex;
align-items: center;
gap: 5px;
font-family: "Lato", sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #000000;
transition: all 0.6s ease;
}
.site-header .main-header .main-nav ul li>a.active,
.site-header .main-header .main-nav ul li>:hover>a {
color: #297999;
}
.site-header .main-header .main-nav ul li:not(:last-of-type) {
margin-right: 40px;
}
.site-header .main-header .main-nav ul li.hase-menu>a::after {
content: '\f078';
display: inline-block;
font-family: "Font Awesome 5 Free";
font-size: 14px;
font-weight: 900;
margin-left: 2px;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-ms-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.site-header .main-header .right-header {
display: flex;
align-items: center;
}
.site-header .main-header .right-header .nav-btns {
padding-left: 40px;
}
.site-header .main-header .right-header .nav-btns {
gap: 22px;
}
.site-header .main-header .right-header .nav-btns .search-btn {
display: flex;
align-items: center;
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #000000;
gap: 10px;
}
.site-header .main-header .right-header .nav-btns .btn-dark {
padding: 7px 32px;
background-color: #297999;
border-radius: 4px;
display: inline-block;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #FFFFFF;
transition: all 0.6s ease;
}
.site-header .main-header .right-header .nav-btns .btn-dark:hover {
background: #000000;
}
.main-banner {
position: relative;
}
.main-banner .banner-img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.main-banner .banner-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-banner .banner-img::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 110.77%);
}
.main-banner .banner-content {
position: relative;
z-index: 1;
text-align: center;
padding-bottom: 50px;
padding-top: 32%;
}
.main-banner .banner-content h1 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #FFFFFF;
margin-bottom: 40px;
}
.main-banner .banner-content p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #FFFFFF;
margin-bottom: 40px;
}
.main-banner .banner-content .btn-border-white {
display: inline-block;
padding: 10px 32px;
border: 1px solid #FFFFFF;
border-radius: 4px;
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 22px;
color: #FFFFFF;
transition: all 0.6s ease;
}
.main-banner .banner-content .btn-border-white:hover {
background-color: #297999;
border-color: #297999;
}
.cust-card-one .cust-card-body {
background-color: #FFF9D7;
padding-top: 22px;
height: 100%;
display: flex;
flex-direction: column;
}
.cust-card-one .cust-card-body .card-img {
margin: 0px 0 25px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
padding: 15px;
}
.cust-card-one .cust-card-body .card-img img {
display: block;
margin: auto;
}
.cust-card-one .cust-card-body .card-btn a {
display: block;
background-color: #297999;
color: #FFFFFF;
text-align: center;
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 20px;
color: #FFFFFF;
padding: 5px 15px;
}
.padding-bottom {
padding-bottom: 80px;
}
.padding-top {
padding-top: 80px;
}
.whywe-exist .whywe-info h2 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
}
.whywe-exist .whywe-info h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
margin-bottom: 15px;
}
.whywe-exist .whywe-info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.section-title h2 {
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
margin-bottom: 10px;
}
.section-title p {
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.collective-action .action-data {
margin-top: 20px;
}
.collective-action .action-data .sm-title {
font-family: "Lato", sans-serif;
font-style: italic;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #297999;
margin-bottom: 20px;
}
.collective-action .action-data .count-card h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 50px;
line-height: 50px;
text-align: center;
color: #297999;
margin-bottom: 20px;
}
.collective-action .action-data .count-card p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #297999;
}
.collective-action .action-data .data-stripe {
font-family: "Lato", sans-serif;
padding: 20px;
background: #297999;
font-style: italic;
font-weight: 400;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #FFFFFF;
margin-top: 40px;
}
.scale-tabs .nav-tabs {
border: 0;
}
.scale-tabs .nav-tabs li {
flex: 1;
}
.scale-tabs .nav-tabs .nav-link {
border: 0;
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 16px;
text-align: center;
color: #297999;
width: 100%;
padding: 30px 0px;
border-bottom: 5px solid transparent;
}
.scale-tabs .nav-tabs .nav-link.active {
border-color: #297999;
font-weight: 700;
}
.mb-20 {
margin-bottom: 20px !important;
}
.scale-tabs .tab-title {
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
margin-bottom: 40px;
}
.scale-tabs .tab-content {
margin-top: 40px;
}
.scale-tabs .tab-content .tab-title span {
color: #FFB338;
text-transform: uppercase;
}
.tab-card .tab-card-body {
padding: 16px 0px;
border: 1px solid rgba(156, 212, 196, 0.2);
border-radius: 16px;
text-align: center;
padding: 15px 15px 30px;
height: 100%;
}
.tab-card .tab-card-body .icon {
width: 60px;
height: 60px;
margin: 0 auto 20px;
}
.tab-card .tab-card-body h3 {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #000000;
font-family: "Lato", sans-serif;
}
.tab-card .tab-card-body p {
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #000000;
}
.scale-tabs .result-trip {
padding: 30px;
background: linear-gradient(90deg, #E3EEDB 0%, #E1E7F1 25.85%, #F4D7D7 60.85%, #F7ECCE 95.35%);
border-radius: 16px;
}
.scale-tabs .result-trip .result-card {
text-align: center;
}
.scale-tabs .result-trip .result-card h4 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 34px;
color: #297999;
}
.scale-tabs .result-trip .result-card p {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #297999;
}
.scale-tabs .result-trip .row>* {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.scale-tabs .result-trip .row>*:not(:last-of-type) {
border-right: 1px solid #297999;
}
.change-makers {
background-color: #9CD4C44D;
padding: 40px 0px;
}
.change-makers .section-title p {
color: #297999;
}
.change-makers .section-title h2 {
margin-bottom: 35px;
}
.logo-grid {
margin: 40px 0;
}
.logo-grid:not(.swiper-initialized) {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
/* Static grid for members page (no Swiper) */
.logo-grid-static {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.logo-grid .swiper-wrapper {
display: flex !important;
align-items: center !important;
}
.logo-grid .swiper-slide {
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.logo-grid .logo-box {
display: flex !important;
align-items: center;
justify-content: center;
padding: 25px 15px;
border: 1px solid #297999;
border-radius: 12px;
width: 100% !important;
max-width: 200px;
/* Limit the max width of a single logo box */
height: 200px !important;
/* Fixed height for all logo boxes */
margin: 0 auto;
transition: all 0.3s ease;
overflow: hidden;
}
.logo-grid .logo-box:hover {
border-color: #297999;
}
.logo-grid .logo-box img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.btn-primary {
display: inline-block;
padding: 0px 32px;
background: #297999;
border: 2px solid #297999;
border-radius: 4px;
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 46px;
color: #FFFFFF;
transition: all 0.6s ease;
}
.btn-primary.yellow-bg {
background-color: #FBD037;
border-color: #FBD037;
color: #000000;
}
.btn-primary:hover {
background-color: #000000;
border-color: #000000;
}
.btn-primary.yellow-bg:hover {
background: #297999;
border-color: #297999;
color: #FFFFFF;
}
.become-cac {
margin: 80px 0px;
background-color: #E1F2ED;
padding: 40px 0px;
}
.member-card .member-card-body {
border-radius: 16px;
background-color: #297999;
padding: 60px;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.member-card .member-card-body h2 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
text-align: center;
color: #FBD037;
}
.member-card .member-card-body p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #FFF9D7;
}
.member-card .member-card-body a {
display: block;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 20px;
text-align: center;
color: #000000;
padding: 8px 0px;
background: #FFFFFF;
border-radius: 4px;
margin-top: 20px;
width: 100%;
transition: all 0.6s ease;
}
.member-card .member-card-body a:hover {
background-color: #000000;
color: #FFFFFF;
}
.tpoic-card .cr-img {
position: absolute;
border-radius: 16px;
overflow: hidden;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.tpoic-card .cr-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tpoic-card .cr-img::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: #297999;
opacity: 0.5;
}
.tpoic-card .tpoic-card-body {
position: relative;
height: 100%;
}
.tpoic-card .tpoic-card-body .cr-name {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #FBD037;
text-align: center;
padding-bottom: 25px;
position: relative;
padding-top: 80%;
}
.news-signup {
padding: 40px 0px;
background: linear-gradient(0deg, #FDE579 0%, #E1F2ED 69.84%);
}
.news-signup .news-form h2 {
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #000000;
font-family: "Lato", sans-serif;
}
.news-signup .news-form p {
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
font-family: "Lato", sans-serif;
}
.news-signup .news-form form {
margin-top: 30px;
}
.news-signup .news-form form input {
width: 100%;
height: 40px;
padding: 0 10px;
border: 1px solid #000000;
border-radius: 4px;
outline: none;
background-color: transparent;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.news-signup .news-form form input::placeholder {
color: #000000;
}
.btn-submit {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px 32px;
gap: 10px;
background: #297999;
border-radius: 4px;
font-weight: 700;
font-size: 24px;
line-height: 46px;
color: #FFFFFF;
text-transform: uppercase;
transition: all 0.6s ease;
outline: none;
border: 0;
}
.btn-submit:hover {
background-color: #FFB338;
}
.site-footer {
background-color: #045B7E;
padding: 20px 0px 0;
}
.site-footer .footer-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.site-footer .footer-top .social-links {
display: flex;
flex-direction: column;
}
.site-footer .footer-top .brand-logo img {
max-width: 215px;
width: 100%;
}
.site-footer .footer-top .brand-logo p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #FFFFFF;
margin-top: 15px;
}
.site-footer .footer-top .social-links a {
display: inline-flex;
align-items: center;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #FFFFFF;
gap: 10px;
}
.site-footer .footer-row {
display: flex;
flex-wrap: wrap;
}
.site-footer .footer-row .footer-col {
width: 100%;
flex: 1;
}
.site-footer .footer-row .footer-col:not(:last-of-type) {
padding-right: 25%;
}
.site-footer .footer-row .footer-col h4 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #FFB338;
}
.site-footer .footer-row .footer-col h4 a {
color: inherit;
}
.site-footer .footer-row .footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-row .footer-col ul li a {
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: #FFFFFF;
transition: all 0.6s ease;
}
.site-footer .footer-row .footer-col ul li a:hover {
color: #FFB338;
}
.site-footer .footer-row .footer-col ul li:not(:last-of-type) {
margin-bottom: 10px;
}
.footer-top-wrape,
.footer-mid {
border-bottom: 1px solid #9CD4C466;
padding-bottom: 20px;
margin-bottom: 20px;
}
.site-footer .networks h5 {
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #FFFFFF;
}
.network-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.site-footer .ftr-copyright {
background: #297999;
border-top: 1px solid rgba(41, 121, 153, 0.2);
border-bottom: 1px solid rgba(41, 121, 153, 0.2);
padding: 16px 0px;
margin-top: 20px;
}
.site-footer .ftr-copyright p {
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #FFFFFF;
text-align: center;
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #FFFFFF;
padding: 40px;
opacity: 0;
visibility: hidden;
margin-top: 15px;
transition: all 0.6s ease;
}
.mega-menu .m-title {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
margin-bottom: 35px;
}
.site-header .main-header .mega-menu .menu-body ul {
display: block;
}
.site-header .main-header .mega-menu .menu-body ul li {
padding: 0;
margin: 0;
}
.site-header .main-header .mega-menu .menu-body ul li a {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.site-header .main-header .mega-menu .menu-body ul li:not(:last-of-type) {
margin-bottom: 20px;
}
.site-header .main-header .mega-menu .drp-img {
margin-bottom: 35px;
}
.site-header .main-header .mega-menu p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.site-header .main-header .mega-menu p:not(:last-of-type) {
margin-bottom: 35px;
}
.site-header .main-header .mega-menu p+.btn-primary {
margin-top: 35px;
}
.site-header .main-header .mega-menu .row {
margin: 0 -40px;
}
.site-header .main-header .mega-menu .row>* {
padding: 0 40px;
}
.site-header .main-header .mega-menu .row>*:not(:last-of-type) {
border-right: 1px solid #666666;
}
.site-header .main-header .main-nav ul li:hover .mega-menu {
opacity: 1;
visibility: visible;
margin-top: 0;
}
.site-header .main-header .main-nav ul li.hase-menu:hover>a::after {
transform: rotate(180deg);
}
.menu-toggle {
position: relative;
background: 0 0;
border: 0;
width: 25px;
padding: 0;
display: none;
}
.menu-toggle span,
.menu-toggle span::after,
.menu-toggle span::before {
height: 3px;
background: #000000;
transition: .2s;
display: block;
}
.menu-toggle span::after,
.menu-toggle span::before {
content: '';
width: 100%;
position: absolute;
left: 0;
}
.menu-toggle span::before {
top: -8px;
}
.menu-toggle span::after {
bottom: -8px;
}
.menu-toggle.active span {
transform: rotate(45deg);
}
.menu-toggle.active span::before {
transform: translate3d(0, 8px, 0);
}
.menu-toggle.active span::after {
transform: rotate(-90deg) translate3d(8px, 0, 0);
}
.mobile-menu-wrapper {
position: fixed;
z-index: 999;
background: #ffff;
top: 0;
height: 100%;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-ms-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
transform: translate(-100%, 0);
left: 0;
width: 280px;
}
.mobile-menu-wrapper.menu-active {
transform: translate(0, 0);
}
.mobile-menu-head {
padding: 15px;
background: #297999;
color: #fff;
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav-close svg {
color: #fafafa;
}
.mobile-menu-bar>ul {
list-style: none;
padding: 10px 20px;
margin: 0;
height: calc(100vh - 48px);
overflow: auto;
}
.mobile-menu li {
display: block;
position: relative;
padding: 13px 0;
border-bottom: 1px solid #ececec;
}
.mobile-menu-bar ul li a {
display: block;
color: #212529;
}
.mobile-menu li .menu-expand {
right: 0;
position: absolute;
cursor: pointer;
z-index: 9;
text-align: center;
font-size: 12px;
display: block;
width: 30px;
height: 30px;
line-height: 38px;
top: 5px;
color: #000000;
}
.mobile-menu li.menu-item-has-children.active>.menu-expand i::before {
content: "\f077";
font-weight: 900;
}
.mobile-menu li ul li {
padding: 10px 0;
border-bottom: none;
line-height: 1;
margin: 0;
}
.mobile-menu li ul {
list-style: none;
padding: 10px 0 0 10px;
}
.mobile-menu li ul li a {
font-size: 14px;
}
.overlay-main::after {
content: '';
z-index: 99;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-ms-scroll-chaining: none;
overscroll-behavior: none;
visibility: hidden;
opacity: 0;
transition: visibility 0s .4s, opacity .4s;
background: rgba(0, 0, 0, .3);
}
.overlay-main.active::after {
visibility: visible;
opacity: 1;
transition-delay: .05s;
}
.page-banner {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
}
.page-banner .banner-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 110.77%);
z-index: 1;
}
.page-name {
position: relative;
padding-top: 20%;
padding-bottom: 60px;
z-index: 2;
}
.page-banner .page-name h1 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
text-align: center;
color: #FFFFFF;
}
.page-banner .page-name .sub-title {
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
line-height: 1.2em;
letter-spacing: 4px;
text-align: center;
font-family: "Lato", sans-serif;
color: #FFFFFF;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
justify-content: center;
}
.page-banner .page-name p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
}
.page-banner .page-name .btn-primary {
margin-top: 40px;
}
.vision-mission {
background: rgba(156, 212, 196, 0.2);
}
.vision-mission .have-border {
border-left: 1px solid #297999;
}
.mission-card {
padding: 60px 0;
text-align: center;
}
.mission-card .icon {
margin-bottom: 10px;
}
.mission-card h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
}
.mission-card p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #000000;
}
.padding-top-sm {
padding-top: 40px;
}
.padding-bottom-sm {
padding-bottom: 40px;
}
.principles-card {
text-align: center;
}
.principles-card .principle-icon {
max-width: 68px;
height: 68px;
width: 100%;
background-color: #297999;
border-radius: 5px;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
}
.principles-card h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 16px;
color: #000000;
}
.principles-card p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.beyond-wrapper {
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
border-radius: 10px;
padding: 40px;
margin-top: 20px;
}
.beyond-wrapper .title h4 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 38px;
line-height: 52px;
text-align: center;
color: #000000;
margin-bottom: 40px;
}
.beyond-card .beyond-card-body {
padding: 20px;
background: #FFFFFF;
border-radius: 10px;
display: flex;
gap: 20px;
}
.beyond-card .beyond-card-body .icon-info {
display: flex;
align-items: center;
flex-direction: row;
gap: 20px;
min-width: 320px;
}
.beyond-card .beyond-card-body .icon-info .icon {
background-color: #297999;
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
border: 0;
}
.beyond-card .beyond-card-body .icon-info .name {
flex: 1;
}
.beyond-card .beyond-card-body .icon-info h5 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #297999;
margin-bottom: 0;
}
.beyond-card .beyond-card-body .icon-info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
margin-top: 10px;
}
.beyond-card .beyond-card-body>div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.beyond-card .beyond-card-body>div:not(:last-of-type) {
border-right: 1px solid #297999;
padding-right: 20px;
}
.beyond-card .beyond-card-body .ex-inf h6 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
color: #297999;
margin-bottom: 10px;
}
.beyond-card .beyond-card-body .ex-inf p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.beyond-card:not(:last-of-type) {
margin-bottom: 20px;
}
.systemic-change {
padding: 40px 0px;
background: linear-gradient(0deg, #FDE579 0%, #FFFFFF 69.84%);
}
.systemic-change .section-title h2 {
color: #000000;
}
.cust-video-box {
position: relative;
overflow: hidden;
border-radius: 16px;
min-height: 385px;
background-color: #000000;
}
.cust-video-box video {
width: 100%;
height: 100%;
}
.cust-video-box .play-btn {
background: transparent;
border: 0;
padding: 0;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-50%);
width: 90px;
}
.team-card .team-card-body {
position: relative;
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
border-radius: 16px;
padding: 20px 20px 20px;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.team-card .team-card-body::before {
content: '';
position: absolute;
top: 0;
right: 0;
background: url('../images/team-flower.png');
width: 49px;
height: 56px;
display: none;
}
.team-card .team-card-body .team-img {
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
position: relative;
padding-top: 90%;
}
.team-card .team-card-body .team-img img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.team-card .team-card-body .team-info {
flex: 1;
}
.team-card .team-card-body .team-info h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #000000;
margin-bottom: 10px;
}
.team-card .team-card-body .team-info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #000000;
}
.team-card .team-card-body .social-media {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.section-title.mb-50 {
margin-bottom: 50px;
}
.why-joinus {
background-color: #9CD4C44D;
margin: 40px 0 0px;
padding: 40px 0px;
}
.section-title {
margin-bottom: 40px;
}
.reson-card {
text-align: center;
}
.reson-card .icon {
margin-bottom: 35px;
}
.reson-card .title-rs h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
margin: 0;
}
.together-card {
display: flex;
gap: 16px;
}
.together-card .together-icon {
display: flex;
align-items: center;
justify-content: center;
width: 95px;
height: 95px;
border-radius: 10px;
flex-shrink: 0;
background: linear-gradient(90deg, #E3EEDB 0%, #E1E7F1 25.85%, #F4D7D7 60.85%, #F7ECCE 95.35%);
border: 1px solid #297999;
}
.together-card .together-info h4 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
}
.together-card .together-info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.action-partnerships .background-warpe {
position: relative;
}
.action-partnerships .background-warpe::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(41, 121, 153, 0.19) 2.2%, #0E2833 89.63%);
}
.action-partnerships .background-warpe img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.action-partnerships .background-warpe .section-title {
position: relative;
padding-top: 130px;
padding-bottom: 100px;
}
.action-partnerships .background-warpe .section-title h2,
.action-partnerships .background-warpe .section-title p {
color: #FFFFFF;
}
.testimonial-box {
padding: 78px 100px;
background: #FBD037;
border-radius: 24px;
}
.testimonial-card .user-profile {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.testimonial-card .user-profile .user-img img {
width: 110px;
height: 110px;
object-fit: cover;
border-radius: 50%;
}
.testimonial-card .user-profile .user-name p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1;
color: #000000;
margin-bottom: 5px;
}
.testimonial-card .user-profile .user-name h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 16px;
color: #000000;
margin: 0;
}
.testimonial-card .user-desc p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.action-partnerships .partnership-wrapper {
margin-top: -100px;
position: relative;
}
.partner-form-part {
padding: 40px 0px;
/* background: linear-gradient(360deg, rgba(4, 91, 126, 0.4) 0%, rgba(156, 212, 196, 0.4) 95.35%); */
background: linear-gradient(0deg, #FDE579 0%, #E1F2ED 69.84%);
}
.partner-form-part form .input-wrapper input {
width: 100%;
padding: 8px 10px;
height: 40px;
background: rgba(156, 212, 196, 0.1);
border: 1px solid #297999;
border-radius: 4px;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
outline: none;
}
.partner-form-part form .input-wrapper input::placeholder {
color: #000000;
}
.interested-in {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.interested-in .lbl {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.partner-form-part form .form-check .form-check-label {
display: flex;
align-items: center;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
gap: 10px;
cursor: pointer;
}
.partner-form-part form .form-check .form-check-label::before {
content: '';
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid #297999;
font-family: "Font Awesome 5 Free";
font-size: 11px;
font-weight: 900;
line-height: 16px;
color: #FFFFFF;
text-align: center;
flex-shrink: 0;
}
.partner-form-part form .form-check {
padding: 0;
}
.partner-form-part form .form-check-input[type=radio] {
display: none;
}
.partner-form-part form .form-check-input[type=radio]:checked+.form-check-label::before {
content: '\f00c';
background-color: #297999;
}
.partner-form-part .form-info p {
font-family: "Lato", sans-serif;
font-style: italic;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #000000;
}
.partner-form-part .btn-primary {
padding-top: 10px;
padding-bottom: 10px;
}
.partner-form-part .select2 {
width: 100% !important;
}
.select2-container--default .select2-selection--single {
padding: 0px 10px;
background: rgba(156, 212, 196, 0.1);
border: 1px solid #297999;
border-radius: 4px;
height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 40px;
color: #000000;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 50%;
right: 20px;
width: 20px;
transform: translateY(-50%);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border: 0 !important;
width: 19px;
height: 9px;
background: url('data:image/svg+xml,');
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
transform: rotate(-180deg);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #297999;
}
.focus-area {
background-color: #FFF9D7;
padding: 40px 0;
}
.focus-area .section-title h2 {
color: #000000;
}
.focus-card {
text-align: center;
}
.focus-card .fc-num {
background-color: #8E9952;
border-radius: 5px;
width: 45px;
height: 45px;
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 45px;
color: #FFFFFF;
text-align: center;
margin: 0 auto 10px;
}
.focus-card .fc-info h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #000000;
}
.focus-card .fc-info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #000000;
}
.aim-tabs {
flex-direction: column;
}
.aim-tabs .nav-item .nav-link {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #000000;
border-radius: 0;
border: 0;
padding: 10px 100px 10px 10px;
transition: all 0.6s ease;
width: 100%;
text-align: left;
}
.aim-tabs .nav-item .nav-link.active {
color: #FFFFFF;
background-color: #297999;
}
.aim-tabs .nav-item .nav-link:not(.active) {
padding-left: 0;
}
.achieve-aim {
overflow: hidden;
background: linear-gradient(90deg, #E3EEDB 0%, #E1E7F1 25.85%, #F4D7D7 60.85%, #F7ECCE 95.35%);
}
.achieve-aim .left-side {
position: relative;
padding-top: 80px;
padding-bottom: 80px;
padding-right: 100px;
}
.achieve-aim .right-side {
padding-top: 80px;
padding-bottom: 80px;
padding-left: 100px;
}
.tab-content .tab-title {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 25px;
color: #000000;
margin-bottom: 40px;
}
.aim-list .aim-box {
display: flex;
align-items: center;
gap: 10px;
}
.aim-list .aim-box .icon {
flex-shrink: 0;
}
.aim-list .aim-box .info h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #297999;
margin: 0;
}
.aim-list .aim-box .info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.aim-list .aim-box:not(:last-of-type) {
margin-bottom: 20px;
}
.news-card .news-card-body {
display: flex;
flex-direction: column;
height: 100%;
}
.news-card .news-card-body .news-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px 16px 0px 0px;
}
.news-card .news-card-body .new-info {
border: 1px solid #297999;
border-top: 0;
padding: 20px;
border-radius: 0px 0px 16px 16px;
display: flex;
flex-direction: column;
height: 100%;
}
.news-card .news-card-body .new-info .date {
display: block;
font-family: "Lato", sans-serif;
font-style: italic;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
margin-bottom: 10px;
}
.news-card .news-card-body .new-info h3 a {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
}
.news-card .news-card-body .new-info h3 {
margin-bottom: 20px;
}
.news-card .news-card-body .new-info p {
flex: 1;
}
.news-card .news-card-body .new-info .author {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 16px;
color: #000000;
margin-bottom: 0;
margin-top: 20px;
}
.btn-primary.btn-sm {
font-size: 18px;
line-height: 49px;
}
.coalition-card .coalition-card-body {
border: 1px solid #FBD037;
border-radius: 24px;
overflow: hidden;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.coalition-card .coalition-card-body::before {
content: '';
position: absolute;
top: 0;
right: 0;
background: url('../images/flower-top.png');
width: 83px;
height: 52px;
background-repeat: no-repeat;
background-size: 100%;
}
.coalition-card .coalition-card-body::after {
content: '';
position: absolute;
bottom: 0px;
left: 0;
background: url('../images/flower-bottom.png');
width: 62px;
height: 46px;
background-repeat: no-repeat;
background-size: 100%;
}
.coalition-card .coalition-card-body .coalition-title h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #000000;
padding: 20px;
margin: 0;
}
.coalition-card .coalition-card-body .coalition-title .img-title {
text-align: center;
padding: 12px;
}
.coalition-card .coalition-card-body .coalition-info {
padding: 20px;
background: linear-gradient(90deg, #E3EEDB 0%, #E1E7F1 25.85%, #F4D7D7 60.85%, #F7ECCE 95.35%);
display: flex;
flex-direction: column;
flex: 1;
}
.coalition-card .coalition-card-body .coalition-info .key-stats {
flex: 1;
}
.coalition-card .coalition-card-body .coalition-info .tag {
display: inline-block;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #FFFFFF;
padding: 5px 10px;
background-color: #297999;
border-radius: 50px;
margin-bottom: 10px;
}
.coalition-card .coalition-card-body .coalition-info h4 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.coalition-card .coalition-card-body .coalition-info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #000000;
margin-bottom: 20px;
}
.coalition-card .coalition-card-body .coalition-info h5 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 18px;
color: #000000;
margin-bottom: 10px;
}
.coalition-card .coalition-card-body .coalition-info ul {
list-style: auto;
padding-left: 1rem;
margin-bottom: 20px;
}
.coalition-card .coalition-card-body .coalition-info ul li {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #000000;
}
.coalition-card .coalition-card-body .coalition-info ul li::marker {
font-weight: 700;
}
.coalition-card .coalition-card-body .coalition-info .organisation-logo h6 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 18px;
color: #000000;
margin: 0;
}
.coalition-card .coalition-card-body .coalition-info .organisation-logo img {
margin: 10px 0px;
}
.coalition-card .coalition-card-body .coalition-info .key-stats .lbl {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 18px;
color: #000000;
margin-bottom: 20px;
}
.coalition-card .coalition-card-body .coalition-info .key-stats .number {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 16px;
text-align: center;
color: #000000;
}
.coalition-card .coalition-card-body .coalition-info .key-stats .key-name {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
text-align: center;
color: #000000;
display: block;
}
.coalition-card .coalition-card-body .coalition-info .key-stats {
margin-bottom: 40px;
}
.impact-text-block {
padding: 35px 20px;
background: rgba(156, 212, 196, 0.2);
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #000000;
}
.work-card .work-card-body {
padding: 20px;
background: rgba(156, 212, 196, 0.1);
border: 1px solid rgba(156, 212, 196, 0.2);
border-radius: 16px;
display: flex;
flex-direction: column;
height: 100%;
}
.work-card .work-card-body .info h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 30px;
text-align: center;
color: #000000;
flex: 1;
}
.work-card .work-card-body .info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #000000;
}
.work-card-row .col-lg-2 {
width: 20%;
}
.work-card .work-card-body .icon {
text-align: center;
margin-bottom: 15px;
}
.every-stage .left-block {
background-color: #8E9952;
color: #FFFFFF;
border-radius: 16px 0px 0px 16px;
}
.every-stage .right-block {
background-color: #FBD037;
color: #000000;
border-radius: 0px 16px 16px 0px;
}
.every-stage .center-block {
background-color: #297999;
color: #FFFFFF;
}
.every-stage .stage-info h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
padding: 20px 20px;
border-bottom: 1px solid #FFFFFF;
margin: 0 0 0px;
}
.every-stage .stage-info .info-block {
padding: 10px 20px 30px;
}
.every-stage .stage-info .info-block:not(:last-of-type) {
border-bottom: 1px solid #FFFFFF;
}
.every-stage .stage-info .info-block h4 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
}
.every-stage .stage-info .info-block p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #FFFFFF;
}
.every-stage .right-block .stage-info .info-block p {
color: #000000;
}
.every-stage .right-block .stage-info h3 {
border-color: #000000;
}
.blog-filter {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.blog-filter {
margin-bottom: 40px;
}
.blog-filter button {
background-color: #9CD4C433;
border: 0;
border-radius: 50px;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
text-align: center;
text-transform: uppercase;
color: #000000;
padding: 4px 16px;
}
.blog-filter button.active {
background-color: #FBD037;
}
.blogs-list .blog-card {
width: 100%;
}
.blog-card .blog-card-body {
display: flex;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(90deg, #E3EEDB 0%, #E1E7F1 25.85%, #F4D7D7 60.85%, #F7ECCE 95.35%);
}
.blog-card .blog-card-body .blog-img {
max-width: 320px;
width: 100%;
flex-shrink: 0;
}
.blog-card .blog-card-body .blog-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-card .blog-card-body .blog-info {
padding: 20px;
background-color: #FFFFFF;
margin: 5px 5px 5px 0px;
border-radius: 0px 24px 24px 0px;
flex: 1;
}
.blog-card .blog-card-body .blog-info .category {
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
display: inline-block;
margin-bottom: 20px;
}
.blog-card .blog-card-body .blog-info h3 a {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
}
.blog-card .blog-card-body .blog-info h3 {
margin-bottom: 20px;
}
.blog-card .blog-card-body .blog-info .blg-link {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 20px;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 20px;
color: #000000;
}
.blogs-list .blog-card:not(:last-of-type) {
margin-bottom: 40px;
}
.blog-main-details {
display: flex;
flex-wrap: wrap;
align-items: self-start;
}
.blog-main-details .blg-left {
position: -webkit-sticky;
position: sticky;
top: 150px;
max-width: 200px;
width: 100%;
flex-shrink: 0;
align-self: flex-start;
}
.blog-main-details .blg-right {
flex: 1;
padding-left: 40px;
}
.blg-share-links span {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #000000;
display: block;
margin-bottom: 15px;
}
.blg-share-links ul {
display: flex;
gap: 5px;
list-style: none;
padding: 0;
margin: 0;
}
.blg-share-links ul li a {
display: flex;
background: #297999;
width: 28px;
height: 28px;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.res-nav {
padding: 10px;
background: #297999;
border-radius: 10px;
margin-top: 60px;
}
.res-nav .lbl {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #FFFFFF;
margin-bottom: 15px;
}
.res-nav a {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #FFFFFF;
display: block;
transition: all 0.6s ease;
}
.res-nav a:not(:last-of-type) {
margin-bottom: 8px;
}
.blog-main-details .blg-right h2 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
}
.blog-main-details .blg-right .publish-info {
display: flex;
align-items: center;
gap: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #000000;
margin-bottom: 16px;
}
.blog-main-details .blg-right .publish-info .date {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #A8A8A8;
}
.blog-main-details .blg-right img {
border-radius: 10px;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0px 0px 15px;
}
@media (max-width: 768px) {
.blog-main-details {
flex-direction: column;
}
.blog-main-details .blg-left {
position: static;
max-width: 100%;
}
.blog-main-details .blg-left {
margin-bottom: 20px;
}
.blog-main-details .blg-right {
padding-left: 0 !important;
}
}
.tab-title.mb-20 {
margin-bottom: 20px;
}
.critical-domains {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}
.critical-domains .domains {
display: flex;
align-items: center;
gap: 10px;
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #297999;
}
.achieve-aim .right-side .no-list {
list-style: none;
padding: 0;
margin: 20px 0 0;
}
.achieve-aim .right-side .no-list li {
font-family: "Lato", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.achieve-aim .right-side .no-list li b {
color: #297999;
}
.achieve-aim .right-side .no-list li:not(:last-of-type) {
margin-bottom: 20px;
}
.achieve-aim .right-side .bullet {
margin: 20px 0 0;
padding-left: 20px;
}
.achieve-aim .right-side .bullet li {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
position: relative;
}
.achieve-aim .right-side .bullet li::marker {
color: #297999;
}
.achieve-aim .right-side .bullet li b {
color: #297999;
}
.achieve-aim .right-side .bullet li:not(:last-of-type) {
margin-bottom: 20px;
}
.achieve-aim .right-side .list-style-decimal {
list-style: decimal;
margin: 20px 0px 0px;
padding-left: 20px;
}
.achieve-aim .right-side .list-style-decimal li:not(:last-of-type) {
margin-bottom: 20px;
}
.achieve-aim .right-side .list-style-decimal li {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #297999;
}
.achieve-aim .right-side .list-style-decimal li::marker {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #297999;
}
.site-header .main-nav li .sub-menu {
position: absolute;
left: 0;
top: 100%;
background-color: #fff;
min-width: 260px;
padding: 25px 15px;
-webkit-transition: .25s;
transition: .25s;
opacity: 0;
visibility: hidden;
margin-top: 20px;
z-index: 999;
border: 1px solid #ececec;
-webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, .05);
box-shadow: 5px 5px 15px rgba(0, 0, 0, .05);
list-style: none;
}
.site-header .main-nav li .sub-menu ul {
display: block;
}
.site-header .main-nav li .sub-menu ul li {
padding: 0;
}
.site-header .main-nav li .sub-menu ul li:not(:last-of-type) {
margin-bottom: 15px;
}
.site-header .main-nav li:hover .sub-menu {
opacity: 1;
visibility: visible;
margin-top: 0px;
}
.banner-itm {
position: relative;
height: unset;
}
.main-banner-slider .swiper-wrapper {
display: flex;
height: 100%;
}
.main-banner-slider .swiper-slide {
height: auto;
}
.new-title .sub-title {
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase;
line-height: 1.2em !important;
letter-spacing: 4px;
color: #000000 !important;
font-family: "Lato", sans-serif;
}
.new-title .main-title {
font-family: "Lato", sans-serif;
font-weight: 700 !important;
font-size: 32px !important;
line-height: 42px !important;
color: #297999 !important;
}
.collective-action {
padding: 40px 40px;
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
}
.section-title.mb-70 {
margin-bottom: 70px;
}
.coalition-card-new .coalition-card-new-body {
padding: 20px;
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
border-radius: 24px;
border: 1px solid #FBD037;
border-top: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.coalition-card-new .coalition-card-new-body .name-or-logo {
text-align: center;
height: 95px;
display: flex;
align-items: center;
}
.coalition-card-new .coalition-card-new-body .name-or-logo img {
width: auto;
height: auto;
max-height: 100%;
}
.coalition-card-new .coalition-card-new-body .name-or-logo h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
margin-bottom: 0;
}
.coalition-card-new .coalition-card-new-body .info {
margin-top: 40px;
flex: 1;
display: flex;
flex-direction: column;
}
.coalition-card-new .coalition-card-new-body .info h5 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #000000;
margin-bottom: 20px;
}
.coalition-card-new .coalition-card-new-body .info p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #000000;
margin-bottom: 40px;
flex: 1;
}
.share-text a {
text-decoration: underline;
color: #FFB338;
}
.time-line-card .time-line-body {
padding: 16px;
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
border: 1px solid #297999;
position: relative;
height: 100%;
}
.time-line-card .time-line-body h3 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 32px;
color: #297999;
margin-bottom: 10px;
}
.time-line-card .time-line-body p {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #000000;
}
.time-line-card {
position: relative;
padding-bottom: 40px;
flex: 1;
}
.time-line-card::before {
content: '';
position: absolute;
bottom: -11px;
left: 0;
right: 0;
margin: auto;
width: 30px;
height: 30px;
background: url('data:image/svg+xml,');
border-radius: 50%;
z-index: 1;
}
.time-line-view .time-line-top {
display: flex;
position: relative;
}
.time-line-view .time-line-top::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 5px;
border-radius: 5px;
background-color: #297999;
}
.time-line-bottom {
display: flex;
}
.time-line-bottom .time-line-card {
flex: 1;
padding-top: 40px;
}
.time-line-bottom .time-line-card::before {
display: none;
}
.time-line-card .num-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 10px;
}
.time-line-card .num-grid div {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #000000;
}
.time-line-card .num-grid div span {
display: block;
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 17px;
color: #297999;
}
.time-line-card .num-grid div:not(:last-of-type) {
border-right: 1px solid #9cd4c473;
padding-right: 10px;
}
.valu-card .valu-card-body {
padding: 0px 15px 30px 40px;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
display: flex;
gap: 35px;
position: relative;
z-index: 1;
height: 100%;
}
.valu-card .valu-card-body .value-info {
padding-top: 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.valu-card .valu-card-body .valu-icon {
position: relative;
max-width: 155px;
width: 100%;
background: #297999;
border-radius: 0px 0px 10px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.valu-card .valu-card-body .valu-icon::before {
content: '';
position: absolute;
top: 0px;
background: url('data:image/svg+xml,');
width: 186px;
height: 18px;
z-index: -1;
}
.valu-card .valu-card-body h4 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 22px;
color: #000000;
}
.valu-card .valu-card-body ul {
list-style: auto;
padding-left: 15px;
}
.valu-card .valu-card-body ul li {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
}
.canvas-info {
padding: 40px;
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
border: 1px solid #297999;
border-radius: 16px;
}
.canvas-info .canvas-block {
display: flex;
align-items: center;
}
.canvas-info .canvas-block .title {
padding: 0px 44px;
max-width: 330px;
flex-shrink: 0;
width: 100%;
}
.canvas-info .canvas-block .title h4 {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #000000;
}
.canvas-info .canvas-block .title h4 a {
color: currentColor;
}
.canvas-info .canvas-block .info {
flex: 1;
padding-left: 40px;
}
.canvas-info .canvas-block .info span {
display: inline-block;
padding: 2px 8px;
border-radius: 20px;
background-color: #8E9952;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: #FFFFFF;
margin-bottom: 20px;
}
.canvas-info .canvas-block .info p {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #000000;
margin-bottom: 20px;
}
.canvas-info .canvas-block .info .domain {
font-family: "Lato", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #297999;
}
.canvas-info .canvas-block .info .domain a {
color: currentColor;
}
.canvas-info .canvas-block:not(:last-of-type) {
border-bottom: 1px solid #000000;
padding-bottom: 40px;
margin-bottom: 40px;
}
.italic {
font-style: italic !important;
}
.have-search {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.have-search .blog-filter {
margin-bottom: 0;
}
.have-search .search-bar {
max-width: 400px;
width: 100%;
}
.have-search .input-wrapper {
position: relative;
}
.have-search .input-wrapper input {
width: 100%;
padding: 8px 50px 8px 10px;
height: 40px;
border: 1px solid #297999;
border-radius: 4px;
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000000;
outline: none;
}
.have-search .input-wrapper input::placeholder {
color: #000000;
}
.have-search .input-wrapper button {
background: transparent;
outline: none;
border: 0;
padding: 0;
color: #000000;
position: absolute;
top: 6px;
right: 15px;
}
.systemic-change.bg-two {
background: #9CD4C44D;
}
/*
font-family: "Lato", sans-serif;
*/
/* Styles for Emergency Response Page */
.emergency-response-page .emergency-banner {
position: relative;
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
padding: 180px 0 100px;
color: #fff;
min-height: 550px;
display: flex;
align-items: center;
}
.emergency-response-page .emergency-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.77) 7.91%, rgba(0, 0, 0, 0) 73.14%);
z-index: 1;
}
.emergency-response-page .emergency-banner .container {
position: relative;
z-index: 2;
}
.emergency-response-page .emergency-banner .blue-skies-container {
margin-bottom: 25px;
}
.emergency-response-page .emergency-banner .blue-skies-pill {
background: #fff;
border-radius: 50px;
display: inline-flex;
align-items: center;
padding: 5px 5px 5px 20px;
gap: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.emergency-response-page .emergency-banner .pill-label {
color: #000;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.emergency-response-page .emergency-banner .pill-switch {
width: 70px;
height: 34px;
background: #4A90E2;
border-radius: 34px;
position: relative;
}
.emergency-response-page .emergency-banner .pill-handle {
width: 26px;
height: 26px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 4px;
left: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.emergency-response-page .emergency-banner .pill-handle i {
color: #4A90E2;
font-size: 14px;
}
.emergency-response-page .emergency-banner .preparedness-phase {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
.emergency-response-page .emergency-banner .dot-yellow {
width: 10px;
height: 10px;
background: #FFD700;
border-radius: 50%;
display: inline-block;
}
.emergency-response-page .emergency-banner .hero-title {
font-size: 56px;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.1;
}
.emergency-response-page .emergency-banner .hero-subtitle {
font-size: 24px;
font-weight: 400;
margin-bottom: 40px;
color: #fff;
}
.emergency-response-page .emergency-banner .banner-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.emergency-response-page .emergency-banner .btn-banner {
padding: 12px 32px;
border-radius: 4px;
font-size: 18px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
cursor: pointer;
}
.emergency-response-page .emergency-banner .btn-response {
background-color: #297999;
color: #fff;
border: 2px solid #297999;
cursor: pointer;
}
.emergency-response-page .emergency-banner .btn-response:hover {
background-color: #1f5a73;
border-color: #1f5a73;
color: #fff;
}
.emergency-response-page .emergency-banner .btn-resource-outline {
background-color: #CFCFCF6B;
/* Apply the blur effect */
-webkit-backdrop-filter: blur(6.5px);
/* For Safari */
backdrop-filter: blur(6.5px);
color: #fff;
border: 2px solid #fff;
}
.emergency-response-page .emergency-banner .btn-resource-outline:hover {
background-color: #fff;
color: #297999;
}
@media (max-width: 991px) {
.emergency-response-page .emergency-banner .hero-title {
font-size: 48px;
}
.emergency-response-page .emergency-banner {
padding: 140px 0 80px;
}
}
@media (max-width: 767px) {
.emergency-response-page .emergency-banner .hero-title {
font-size: 32px;
margin-bottom: 15px;
}
.emergency-response-page .emergency-banner .hero-subtitle {
font-size: 16px;
margin-bottom: 25px;
}
.emergency-response-page .emergency-banner .preparedness-phase {
margin-bottom: 12px;
font-size: 16px;
}
.emergency-response-page .emergency-banner .blue-skies-container {
margin-bottom: 20px;
}
.emergency-response-page .emergency-banner .banner-buttons {
flex-direction: column;
gap: 12px;
}
.emergency-response-page .emergency-banner .btn-banner {
width: 100%;
text-align: center;
padding: 12px 20px;
font-size: 15px;
}
.emergency-response-page .emergency-banner {
padding: 140px 0 40px;
align-items: flex-end;
}
}
.emergency-response-page .quote-strip {
background-color: #297999;
padding: 40px 0;
text-align: center;
}
.emergency-response-page .quote-text {
color: #fff;
font-size: 32px;
font-style: italic;
font-weight: 700;
margin-bottom: 0;
line-height: 1.2;
}
@media (max-width: 991px) {
.emergency-response-page .quote-text {
font-size: 24px;
padding: 0 15px;
}
}
@media (max-width: 767px) {
.emergency-response-page .quote-text {
font-size: 20px;
padding: 0 10px;
}
}
.emergency-response-page .intro-section {
background-color: #fff;
padding: 80px 0;
width: 100%;
}
.emergency-response-page .intro-section .container {
max-width: 1513px !important;
padding-left: 108px !important;
padding-right: 108px !important;
margin: 0 auto;
}
.emergency-response-page .intro-section .inner-section {
width: 1296px;
height: auto;
min-height: 371px;
display: flex;
gap: 40px;
align-items: center;
}
.emergency-response-page .intro-text-col {
flex: 0 0 577.74px;
height: 360px;
background: transparent;
}
.emergency-response-page .intro-body {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 24px;
color: #000000;
margin-bottom: 20px;
text-align: left;
}
.emergency-response-page .intro-body strong {
font-weight: 700;
}
.emergency-response-page .intro-img-col {
flex: 0 0 678.67px;
height: 371px;
}
.emergency-response-page .intro-section img {
width: 678.67px;
height: 370.98px;
object-fit: cover;
border-radius: 4px;
}
@media (max-width: 1400px) {
.emergency-response-page .intro-section .container {
max-width: 100% !important;
padding-left: 50px !important;
padding-right: 50px !important;
}
.emergency-response-page .intro-section .inner-section {
width: 100%;
flex-wrap: wrap;
height: auto;
}
.emergency-response-page .intro-text-col,
.emergency-response-page .intro-img-col {
flex: 1 1 100%;
width: 100%;
height: auto;
}
.emergency-response-page .intro-section img {
width: 100%;
height: auto;
}
}
@media (max-width: 768px) {
.emergency-response-page .intro-section {
padding: 40px 0;
}
.emergency-response-page .intro-section .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
.emergency-response-page .disaster-watch-section {
background-color: #fff;
padding: 80px 0;
}
.emergency-response-page .disaster-watch-section .section-title {
color: #297999;
font-size: 32px;
font-weight: 700;
margin-bottom: 5px;
}
.emergency-response-page .disaster-watch-section .section-subtitle {
font-size: 18px;
color: #333;
margin-bottom: 20px;
}
.emergency-response-page .disaster-timeline {
max-height: 650px;
overflow-y: auto;
padding-right: 20px;
overscroll-behavior: contain;
}
.emergency-response-page .disaster-timeline::-webkit-scrollbar {
width: 6.2px;
}
.emergency-response-page .disaster-timeline::-webkit-scrollbar-track {
background: #9CD4C433;
border-radius: 10px;
}
.emergency-response-page .disaster-timeline::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
.emergency-response-page .disaster-timeline::-webkit-scrollbar-thumb:hover {
background: #999;
}
.emergency-response-page .disaster-item {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #E6E6E6;
border-radius: 15px;
padding: 25px 35px;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.emergency-response-page .disaster-item:hover,
.emergency-response-page .disaster-item.active {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border-color: #297999;
}
.emergency-response-page .disaster-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-right: 30px;
margin-right: 30px;
border-right: 2px solid #E6E6E6;
min-width: 110px;
height: 60px;
}
.emergency-response-page .d-year {
font-size: 15px;
color: #999;
font-weight: 600;
line-height: 1;
}
.emergency-response-page .d-month {
font-size: 26px;
color: #297999;
font-weight: 800;
line-height: 1;
margin-top: 5px;
}
.emergency-response-page .d-title {
font-size: 24px;
font-weight: 700;
color: #000;
margin-bottom: 5px;
}
.emergency-response-page .d-location {
font-size: 15px;
color: #666;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 8px;
}
.emergency-response-page .d-location i {
color: #ccc;
font-size: 14px;
}
.emergency-response-page .featured-disaster .fd-content {
border: 1px solid #29799933;
background-color: #EAF2F0;
padding: 20px;
border-radius: 16px;
font-size: 17px;
line-height: 24px;
font-weight: 400;
color: #000;
gap: 10px;
white-space: pre-wrap;
}
.emergency-response-page .featured-disaster img {
width: 100%;
max-height: 196px;
object-fit: cover;
border-radius: 15px;
margin-top: 35px;
}
@media (max-width: 991px) {
.emergency-response-page .disaster-timeline {
max-height: 400px;
margin-bottom: 0px;
}
.emergency-response-page .featured-disaster img {
height: 300px;
max-width: none;
}
.emergency-response-page .disaster-watch-section .section-title {
font-size: 28px;
margin-bottom: 10px;
}
.emergency-response-page .disaster-watch-section .section-subtitle {
margin-bottom: 60px !important;
/* Significantly increased to clear overlap */
}
.emergency-response-page .disaster-watch-section .row {
margin-top: 40px;
}
}
@media (max-width: 767px) {
.emergency-response-page .disaster-item {
padding: 15px;
margin-bottom: 15px;
}
.emergency-response-page .disaster-date {
padding-right: 15px;
margin-right: 15px;
min-width: 85px;
}
.emergency-response-page .d-month {
font-size: 20px;
}
.emergency-response-page .d-title {
font-size: 18px;
}
.emergency-response-page .d-location {
font-size: 13px;
}
.emergency-response-page .disaster-watch-section .section-subtitle {
margin-bottom: 45px !important;
}
}
.emergency-response-page .disaster-watch-section .timeline-col {
flex: 0 0 60% !important;
max-width: 60% !important;
}
.emergency-response-page .disaster-watch-section .content-col {
flex: 0 0 40% !important;
max-width: 40% !important;
}
@media (max-width: 991px) {
.emergency-response-page .disaster-watch-section .timeline-col,
.emergency-response-page .disaster-watch-section .content-col {
flex: 0 0 100% !important;
max-width: 100% !important;
margin: 0px !important;
}
}
.emergency-response-page .community-section {
background-color: #fff;
padding: 80px 0;
}
.emergency-response-page .community-section .container {
max-width: 1513px !important;
margin: 0 auto;
}
.emergency-response-page .community-section .section-title,
.emergency-response-page .network-section .section-title {
color: #297999;
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
}
.emergency-response-page .community-section .section-subtitle {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #000;
max-width: 1200px;
margin: 0 auto 50px;
}
.emergency-response-page .community-card-wrapper {
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
width: 1297px;
min-height: 316px;
border-radius: 16px;
padding: 60px 40px;
margin: 0 auto;
display: flex;
gap: 40px;
position: relative;
}
.emergency-response-page .community-item {
flex: 1;
position: relative;
}
.emergency-response-page .community-item:not(:last-child)::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 256px;
background-color: #297999;
opacity: 1;
}
.emergency-response-page .community-item .case-title {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 24px;
color: #297999;
margin-bottom: 15px;
text-align: left;
}
.emergency-response-page .community-item .case-body {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #297999;
margin-bottom: 0;
text-align: left;
}
@media (max-width: 1350px) {
.emergency-response-page .community-card-wrapper {
width: 100%;
flex-direction: column;
height: auto;
padding: 40px 20px;
}
.emergency-response-page .community-item:not(:last-child)::after {
display: none;
}
}
.emergency-response-page .approach-section {
background: #9CD4C433;
padding: 80px 108px;
width: 100%;
display: flex;
justify-content: center;
}
.emergency-response-page .approach-section .container {
max-width: 1513px !important;
padding: 0 !important;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.emergency-response-page .approach-section .inner-div {
width: 100%;
max-width: 1337px;
display: flex;
flex-direction: column;
align-items: center;
}
.emergency-response-page .approach-section .title-subtitle {
width: 100%;
max-width: 1297px;
margin: 0 auto 40px;
text-align: center;
display: flex;
flex-direction: column;
gap: 20px;
}
.emergency-response-page .approach-section .section-title {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1.2;
color: #297999;
margin: 0;
}
.emergency-response-page .approach-section .section-subtitle {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: #000;
margin: 0;
max-width: 1200px;
margin: 0 auto;
}
.emergency-response-page .approach-grid {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
}
.emergency-response-page .approach-card {
width: 419px;
min-height: 168.12px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
}
.emergency-response-page .approach-card .step-number {
width: 42.12px;
height: 42.12px;
background: #297999;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
}
.emergency-response-page .approach-card .step-title {
width: 100%;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 24px;
color: #000;
margin: 0;
}
.emergency-response-page .approach-card .step-desc {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: #000;
margin: 0;
}
@media (max-width: 1450px) {
.emergency-response-page .approach-section {
padding: 60px 40px;
}
.emergency-response-page .approach-section .inner-div {
max-width: 100%;
}
}
@media (max-width: 1200px) {
.emergency-response-page .approach-card {
width: calc(33.33% - 27px);
}
}
@media (max-width: 991px) {
.emergency-response-page .approach-card {
width: calc(50% - 20px);
}
}
@media (max-width: 768px) {
.emergency-response-page .approach-section {
padding: 40px 20px;
}
.emergency-response-page .approach-card {
width: 100%;
max-width: 419px;
}
}
/* Resilience Page */
.resilience-banner-new {
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
min-height: 669px;
padding: 40px 108px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.resilience-banner-new .container {
max-width: 1296px;
/* (1512 - 108*2) */
padding: 0;
margin: 0 auto;
}
.banner-row {
display: flex;
align-items: center;
gap: 40px;
}
.banner-left,
.banner-right {
flex: 1;
}
.banner-title {
font-size: 32px;
color: #2b8493;
font-weight: 700;
margin-bottom: 30px;
line-height: 42px;
font-family: 'Lato', sans-serif;
letter-spacing: -0.5px;
}
.banner-description p {
font-style: italic;
font-weight: 400;
font-size: 18px;
color: #444444;
line-height: 24px;
margin-bottom: 25px;
font-family: 'Lato', sans-serif;
text-align: left;
}
.banner-image {
display: flex;
justify-content: flex-end;
align-items: stretch;
height: 100%;
}
.banner-image img {
width: 100%;
height: 100%;
max-width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 4px;
}
/* Living On The Edge Section */
.living-on-edge {
background: #9CD4C433;
padding: 40px 0;
text-align: center;
}
.section-header {
max-width: 800px;
margin: 0 auto 50px;
}
.section-header h2 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 36px;
color: #2b8493;
margin-bottom: 20px;
}
.section-header p {
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #444444;
line-height: 1.6;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1296px;
margin: 0 auto;
}
.stat-item {
padding: 30px;
background: transparent;
border-right: 1px solid #9CD4C4;
}
.stat-item:last-child {
border-right: none;
}
.stat-val {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 52px;
color: #2b8493;
margin-bottom: 10px;
display: block;
}
.stat-text {
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #444444;
line-height: 24px;
}
.section-pre-footer-text {
max-width: 1292px;
margin: 40px auto 0;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
text-align: center;
color: #444444;
}
.section-footer-text {
max-width: 1292px;
margin: 20px auto 0;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #2b8493;
}
/* How We Think Section */
.how-we-think {
padding: 80px 0;
text-align: center;
background: #fff;
}
.how-we-think .section-header {
max-width: 100%;
}
.how-we-think h3 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin: 60px 0 40px;
}
.shifts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1297px;
margin: 50px auto;
text-align: left;
}
.shift-item {
padding: 20px;
background: #fff;
}
.shift-item h4 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin-bottom: 12px;
display: block !important;
visibility: visible !important;
}
.shift-item p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #444444;
}
/* Access to Systems Highlight Section */
.isolation-highlight {
background: #297999;
padding: 40px 0;
text-align: center;
color: #ffffff;
}
.isolation-highlight .container {
max-width: 1297px;
margin: 0 auto;
}
.isolation-title {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #ffffff;
margin-bottom: 20px;
}
.isolation-description {
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 28px;
color: #ffffff;
max-width: 1297px;
margin: 0 auto;
}
.isolation-description span {
font-weight: 400;
font-style: italic;
}
/* Our Blueprint for Action Section */
.blueprint-section {
padding: 80px 0;
background: #fff;
}
.blueprint-section .section-header h2 {
margin-bottom: 60px;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
text-align: center;
}
.blueprint-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 1297px;
margin: 0 auto;
}
.blueprint-item {
padding: 0 40px;
position: relative;
}
.blueprint-item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 322.122px;
width: 1px;
background: #297999;
}
.blueprint-item:last-child {
border-right: none;
}
.blueprint-number {
width: 40px;
height: 40px;
background: #2b8493;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-weight: 700;
font-size: 18px;
margin-bottom: 24px;
}
.blueprint-item h4 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #333333;
margin-bottom: 20px;
}
.blueprint-item p {
font-family: 'Lato', sans-serif;
font-size: 16px;
line-height: 24px;
color: #297999;
margin-bottom: 15px;
}
.blueprint-highlight {
font-weight: 700;
color: #297999 !important;
}
/* What the Evidence Shows Section */
.evidence-section {
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
padding: 80px 0;
text-align: center;
}
.evidence-section .section-header {
max-width: 100%;
margin: 0 auto 20px;
}
.evidence-section .section-header h2 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
text-align: center;
color: #297999;
}
.evidence-intro {
width: 100%;
margin: 0 auto 40px;
padding: 0 20px;
}
.evidence-intro p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #333333;
margin-bottom: 20px;
}
.evidence-link {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-style: italic;
font-size: 24px;
line-height: 32px;
color: #297999;
text-decoration: underline;
display: inline-block;
margin: 5px 0 40px;
}
.evidence-link:hover {
color: #3196a8;
}
.evidence-container {
background: #297999;
padding: 40px;
max-width: 1297px;
margin: 0 auto;
}
.evidence-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid #ffffff;
}
.evidence-item {
padding: 40px;
border: 1px solid #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
min-height: 200px;
}
.evidence-item h5 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: #FDE579;
margin-bottom: 12px;
}
.evidence-item p {
margin: 0;
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 24px;
color: #ffffff;
}
/* Building Momentum Section */
.momentum-section {
padding: 80px 0;
background: #fff;
text-align: center;
}
.momentum-section h2 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
margin-bottom: 20px;
}
.momentum-subtitle {
max-width: 1000px;
margin: 0 auto 60px;
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 24px;
color: #333333;
padding: 0 20px;
}
.momentum-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1296px;
margin: 0 auto;
}
.momentum-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
padding: 0 10px;
}
.momentum-val {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 50px;
line-height: 50px;
color: #297999;
}
.momentum-text {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 24px;
color: #297999;
}
/* Collective Action Section */
.collective-action-section {
background: #E1F2ED;
padding: 80px 0;
}
.collective-row {
display: grid;
grid-template-columns: 4fr 6fr;
align-items: center;
gap: 60px;
max-width: 1296px;
margin: 0 auto;
}
.collective-image,
.collective-content {
width: 100%;
}
.collective-image img {
width: 536px;
height: 491px;
max-width: 100%;
border-radius: 4px;
object-fit: cover;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.collective-content h2 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
margin-bottom: 24px;
text-align: left;
}
.collective-text p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #333333;
margin-bottom: 20px;
text-align: left;
}
/* Resilience Layer Section */
.resilience-layer-section {
padding: 80px 0;
text-align: center;
}
.resilience-layer-section h2 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
margin-bottom: 20px;
}
.resilience-layer-subtitle {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 24px;
color: #333333;
max-width: 800px;
margin: 0 auto 60px;
padding: 0 20px;
}
.layer-box {
max-width: 1297px;
height: 469px;
margin: 0 auto;
position: relative;
perspective: 1500px;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
background-color: transparent !important;
background-image: none !important;
}
.layer-box::before {
display: none !important;
}
.layer-box.flipped {
transform: rotateY(180deg);
}
.layer-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px 40px;
background: url(../images/base-programme-bg.jpg) no-repeat center center;
background-position: center 75%;
background-size: cover;
border-radius: 12px;
z-index: 2;
}
.layer-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(41, 121, 153, 0.82);
z-index: 1;
border-radius: 12px;
}
.layer-content>* {
position: relative;
z-index: 2;
}
.layer-content_front {
z-index: 2;
}
.layer-content_back {
transform: rotateY(180deg);
z-index: 1;
}
.layer-content h3 {
font-family: 'Lato', sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 52px;
margin-bottom: 15px;
color: #fff;
}
.layer-content p {
font-family: 'Lato', sans-serif;
font-style: italic;
margin-bottom: 30px;
font-weight: 300;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #fff;
}
.apply-lens-btn {
background: #FBD037;
color: #000000;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
height: 50px;
width: 236px;
padding: 10px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}
.apply-lens-btn_wide {
width: 320px;
}
.apply-lens-btn:hover,
.apply-lens-btn:focus {
text-decoration: underline;
text-underline-offset: 4px;
color: #000000;
}
/* Join Movement Section */
.join-movement-section {
padding: 0 0 40px;
background: #fff;
text-align: center;
}
.join-movement-section h2 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
color: #297999;
margin-bottom: 10px;
}
.join-movement-desc {
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #333;
margin-bottom: 50px;
}
.movement-grid {
display: grid;
justify-content: center;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1296px;
margin: 20px auto 20px;
}
.movement-item {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 0 10px;
max-width: 324px;
margin: 0 auto;
}
.movement-shape {
position: relative;
width: 100%;
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.shape-inner {
position: absolute;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
padding: 0 15px;
}
.shape-inner h4 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 20px;
color: #fff;
line-height: 32px;
margin: 0;
}
.movement-text {
padding-left: 20px;
margin-left: 63px;
margin-top: -160px;
min-height: 150px;
position: relative;
z-index: 1;
}
.movement-text p {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 24px;
color: #333;
margin: 0;
padding-top: 10px;
}
.movement-footer-text {
font-family: 'Lato', sans-serif;
font-size: 20px;
font-weight: 500;
color: #000;
margin: 40px 0 30px;
}
.join-btn-movement {
background: #297999;
color: #fff;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
padding: 12px 30px;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.join-btn-movement:hover {
background: #1e5a74;
color: #fff;
}
/* Video Section */
.video-section {
padding: 10px 0 80px;
background: #fff;
}
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1296px;
margin: 0 auto 50px;
}
.video-card {
position: relative;
width: 100%;
height: 252px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
.video-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.video-card:hover .video-overlay {
background: rgba(0, 0, 0, 0.2);
}
.play-icon {
width: 60px;
height: 60px;
}
.view-more-container {
text-align: center;
}
.view-more-btn {
background: #297999;
color: #fff;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
padding: 12px 60px;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 300ms;
border: none;
}
.view-more-btn:hover {
color: #fff;
background: #1e5a74;
}
/* Video Modal Styles */
.video-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
box-sizing: border-box;
}
.modal-content-wrapper {
position: relative;
width: 90%;
max-width: 1000px;
margin: 10vh auto;
aspect-ratio: 16 / 9;
}
.video-modal iframe {
width: 100%;
height: 100%;
border: none;
}
.close-modal {
position: absolute;
top: -40px;
right: 0;
color: #fff;
font-size: 35px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
.close-modal:hover {
color: #ccc;
}
/* Laptop Screens (max-width: 1200px) */
@media (max-width: 1200px) {
.movement-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px 20px;
}
.momentum-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px 20px;
}
.momentum-grid .momentum-item:last-child {
grid-column: span 2;
}
}
/* Tablet (max-width: 991px) */
@media (max-width: 991px) {
.resilience-banner-new {
padding: 60px 20px;
min-height: auto;
}
.banner-row {
flex-direction: column;
gap: 40px;
}
.banner-content {
padding-right: 0;
margin-bottom: 0;
}
.banner-title {
text-align: center;
font-size: 28px;
}
.banner-description p {
font-size: 16px;
}
.banner-image {
justify-content: center;
}
.stats-grid,
.shifts-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 20px;
}
.shift-item {
text-align: center;
padding: 10px;
}
.stat-item {
border-right: none;
border-bottom: 1px solid #9CD4C4;
padding: 20px 0;
}
.stat-val {
font-size: 32px;
}
.section-header h2 {
font-size: 30px;
}
.section-header p {
font-size: 16px;
}
.section-footer-text {
font-size: 20px;
line-height: 28px;
}
.isolation-highlight {
padding: 40px 20px;
}
.isolation-title {
font-size: 24px;
line-height: 32px;
}
.isolation-description {
font-size: 16px;
line-height: 24px;
}
.blueprint-section .section-header h2 {
font-size: 30px;
line-height: 1.2;
margin-bottom: 20px;
}
.blueprint-grid {
grid-template-columns: 1fr;
}
.blueprint-item {
border-right: none;
border-bottom: 1px solid #297999;
padding: 20px 0;
}
.blueprint-number {
margin-bottom: 10px;
}
.blueprint-item h4 {
font-size: 22px;
line-height: 28px;
}
.blueprint-item p {
font-size: 14px;
line-height: 20px;
}
.blueprint-item::after {
display: none;
}
.blueprint-item:last-child {
border-bottom: none;
}
.evidence-section {
padding: 60px 0;
}
.evidence-container {
padding: 20px;
margin: 0 10px;
}
.evidence-grid {
grid-template-columns: repeat(2, 1fr);
}
.evidence-item {
padding: 30px 20px;
min-height: auto;
}
.evidence-item h5 {
font-size: 16px;
line-height: 22px;
}
.evidence-item p {
font-size: 14px;
line-height: 20px;
}
.evidence-item:last-child {
grid-column: span 2;
}
.evidence-link {
font-size: 20px;
line-height: 28px;
}
.momentum-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px 20px;
padding: 0 20px;
}
.momentum-grid .momentum-item:last-child {
grid-column: span 2;
}
.momentum-val {
font-size: 36px;
line-height: 1.2;
}
.momentum-text {
font-size: 16px;
line-height: 22px;
}
.collective-row {
grid-template-columns: 1fr;
padding: 0 20px;
gap: 40px;
}
.collective-content h2 {
text-align: center;
font-size: 28px;
}
.layer-box {
height: 420px;
min-height: 420px;
padding: 0;
margin: 0 10px;
}
.layer-content {
padding: 40px 20px;
}
.layer-content h3 {
font-size: 32px;
line-height: 1.2;
}
.layer-content p {
font-size: 20px;
}
.movement-grid,
.video-grid {
grid-template-columns: 1fr 1fr;
}
.logo-grid:not(.swiper-initialized),
.logo-grid-static {
grid-template-columns: repeat(4, 1fr);
}
}
/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
.join-movement-section {
max-width: 100%;
}
.resilience-banner-new .banner-row {
flex-direction: column;
gap: 20px;
}
.resilience-banner-new .banner-description,
.resilience-banner-new .banner-description p {
text-align: center;
}
.collective-image {
text-align: center;
}
.collective-content h2,
.collective-text p {
text-align: center;
}
.logo-grid:not(.swiper-initialized),
.logo-grid-static {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.logo-grid .logo-box {
height: 140px !important;
padding: 15px 10px;
border-radius: 8px;
}
.section-header h2,
.isolation-title,
.blueprint-section .section-header h2,
.evidence-section .section-header h2,
.momentum-section h2,
.join-movement-section h2,
.resilience-layer-section h2 {
font-size: 26px !important;
line-height: 1.2;
}
.stats-grid,
.shifts-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.stat-item {
border-right: none;
}
.modal-content-wrapper {
width: 95%;
margin: 20vh auto;
}
.close-modal {
top: -30px;
font-size: 30px;
}
}
/* Small Mobile (max-width: 576px) */
@media (max-width: 576px) {
.movement-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.video-grid {
grid-template-columns: 1fr;
}
.shape-inner {
top: 34%;
left: 55%;
}
.movement-shape {
width: 300px;
height: 300px;
}
.movement-text {
margin-left: 60px;
margin-top: -160px;
min-height: auto;
padding-bottom: 30px;
}
.momentum-grid {
grid-template-columns: 1fr;
}
.collective-image img {
width: 100%;
height: 300px;
display: none;
}
}
@media (max-width: 480px) {
.banner-title {
font-size: 24px;
line-height: 1.2;
}
.apply-lens-btn {
width: 100%;
text-align: center;
}
}
/* ── VENN LAYOUT ── */
.venn-wrapper {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: 8px;
}
.lbl-absorb {
grid-column: 2;
grid-row: 1;
text-align: center;
padding-bottom: 24px;
}
.venn-img-wrap {
grid-column: 2;
grid-row: 2;
}
.venn-img {
width: clamp(240px, 38vw, 370px);
height: auto;
display: block;
}
.lbl-adapt {
grid-column: 1;
grid-row: 2;
text-align: center;
align-self: end;
padding-bottom: 35px;
padding-left: 150px;
z-index: 2;
}
.lbl-transform {
grid-column: 3;
grid-row: 2;
text-align: center;
align-self: end;
padding-bottom: 35px;
z-index: 2;
padding-right: 150px;
}
.cap-num {
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: 600;
color: #000;
margin-bottom: 6px;
line-height: 32px;
}
.cap-desc {
font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
color: #000;
line-height: 24px;
max-width: 320px;
margin: 0 auto;
}
@media (max-width: 600px) {
.venn-wrapper {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, auto);
justify-items: center;
row-gap: 18px;
}
.lbl-absorb {
grid-column: 1;
grid-row: 1;
}
.venn-img-wrap {
grid-column: 1;
grid-row: 2;
}
.lbl-adapt {
grid-column: 1;
grid-row: 3;
text-align: center;
padding: 0;
}
.lbl-transform {
grid-column: 1;
grid-row: 4;
text-align: center;
padding: 0;
}
.lbl-adapt .cap-desc {
margin: 0 auto;
}
}
.kodandamma-story .modal-content {
background: linear-gradient(180deg, #D3F7EB 0%, #FAF3CA 100%);
}
.kodandamma-story .modal-content .modal-body h2 {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 42px;
color: #297999;
margin-bottom: 20px;
}
.kodandamma-story .modal-content .modal-body p {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 24px;
color: #333333;
}
.kodandamma-story .modal-content .modal-body p b{
font-weight: 700;
}
.kodandamma-story .modal-content .modal-body{
padding: 40px;
}
.kodandamma-story .modal-content .btn-close{
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
}