/* 
    PEMSEA
    Website CSS - Desktop
    By: Glimsol Web & Digital Solutions (PH)
*/

@font-face { font-family: 'Roboto Regular'; src: url('../fonts/Roboto-Regular.ttf'); font-display: swap;}
@font-face { font-family: 'Roboto Black'; src: url('../fonts/Roboto-Black.ttf'); font-display: swap;}
@font-face { font-family: 'Roboto Bold'; src: url('../fonts/Roboto-Bold.ttf'); font-display: swap;}
@font-face { font-family: 'Roboto Medium'; src: url('../fonts/Roboto-Medium.ttf'); font-display: swap;}
@font-face { font-family: 'Roboto Thin'; src: url('../fonts/Roboto-Thin.ttf'); font-display: swap;}
@font-face { font-family: 'Roboto Light'; src: url('../fonts/Roboto-Light.ttf'); font-display: swap;}
@font-face { font-family: 'Fontin Sans Bold'; src: url('../fonts/Fontin-Sans-Bold.otf'); font-display: swap;}
@font-face { font-family: 'Fontin Sans Regular'; src: url('../fonts/Fontin-Sans-Regular.otf'); font-display: swap;}
@font-face { font-family: 'Bebas regular'; src: url('../fonts/BebasNeue-Regular.otf'); font-display: swap;}
@font-face { font-family: 'Avenirnext bold'; src: url('../fonts/AvenirNextLTPro-Bold.otf'); font-display: swap;}
@font-face { font-family: 'Avenirnext medium'; src: url('../fonts/AvenirNextLTPro-MediumCn.otf'); font-display: swap;}
@font-face { font-family: 'Avenirnext regular'; src: url('../fonts/AvenirNextLTPro-Regular.otf'); font-display: swap;}


:root {
    /* Primary Colors  */
    --pc-green: #05AA4B; --pc-skyblue: #47A5DC; --pc-brown: #684123;

    /* Secondary Colors  */
    --sc-blue: #0074A8; --sc-darkCyan:#009AB2; --sc-Cyan: #009DA0; --sc-yellowGreen: #7DC242; --sc-yellow: #FDBA12; --sc-soft-blue: #D8E2EC;

    --white: #ffffff; --black: #404040; --gray: #E6E7E8;

    --green2:#11abb7;
    --pemsea-dark-blue: #004275;
    --pemsea-transparent-dark-blue: #00427545;

    /* Spacing  */
    --section-padding-t-b: 3rem 12px; --title-margin-bottom: 1.5rem;
    --section-inner-padding-x: 3rem 80px 0; --title-margin-bottom: 1.5rem;
    --progressMargin: 10rem;

    /* Shine Effect */
    --shine-degree: 120deg;
    --shine-color: rgba(255, 255, 255, 0.2);
    --shine-effect: linear-gradient(var(--shine-degree), transparent, var(--shine-color), transparent);
}
strong {
    font-family: 'Roboto Bold', Arial, sans-serif;
    font-weight: normal;
}
/* Global CSS */
.row{margin: 0; width: 100%;}
body{font-family: 'Roboto Light', Arial, sans-serif;}
img{width: 100%; height: auto;}
.region-sidebar-first, .region-sidebar-second, .region-footer, .region-content{padding: 0;}
.inner-page:not(.same) .section-spacing{ padding: var(--section-inner-padding-x);}
.node-43.inner-page:not(.same) .section-spacing{padding-bottom: 40px;}
/* .inner-page .section-spacing:first-child{padding-bottom: 0;} */
.section-spacing{ padding: var(--section-padding-t-b);}
.title{ font-family: 'Roboto Bold';  text-transform: uppercase; text-align: center; font-size: 2.5rem; color: var(--black); margin-bottom: var( --title-margin-bottom);}
.section-title { font-family: 'OpenSans Bold'; font-size: 1.5rem; color: black;}
.small-title{ font-family: 'Roboto Medium'; text-transform: uppercase; font-size: 1.3rem; color: var(--sc-darkCyan);}
.cta-btn{ background: var(--sc-yellowGreen); color: var(--white); text-decoration: none; padding: 15px 30px; font-family: 'Roboto Medium';}
.cta-btn-blue{ text-decoration: none; font-family: 'Roboto Medium'; color: var(--white); background: var(--sc-blue); padding: 10px 20px; border-radius: 10px; display: block; width: fit-content; margin-inline: auto;}
main{min-height: 400px;}

/* to be used as CSS classes for the body, to be able to modify the size of the images under the News Page */
.img-caption-wrapper { margin: 0 auto; padding: 1em; padding-bottom: 0; background-color: whitesmoke;}
.img-caption-wrapper + p, .img-caption-wrapper + p em { padding: 1em; margin: 0 auto; background-color: whitesmoke; font-size: 1rem;}
.large.img-caption-wrapper, .large.img-caption-wrapper + p { max-width: min(900px, 100%) !important;}
.medium.img-caption-wrapper, .medium.img-caption-wrapper + p { max-width: min(700px, 100%) !important;}
.small.img-caption-wrapper, .small.img-caption-wrapper + p { max-width: min(500px, 100%) !important;}
.full-img-caption { max-width: 100% !important; padding: 0;}
.full-img-caption + p.text-align-center:not(:empty) {max-width: 100% !important; padding: 0;}

.node-45 h1.title {display: none;} /* Remove the title of resources  */
.content-wrapper{padding-bottom: 3rem;}
nav.pager {margin-top: 30px;}
.page-link.active, .media-library-view--widget .view-header a.page-link.is-active, .active > .page-link, .media-library-view--widget .view-header a.is-active > .page-link{ background-color: var(--sc-darkCyan); border-color: var(--sc-darkCyan);}
.page-link{color: var(--sc-darkCyan);}
.search-result-page{margin-top: 79px;}
.node-1713 .layout-wysiwyg img {max-width: 500px;}
.node-84 .layout-card-w-img-link-desc.section-spacing{padding-top: 20px;}
.node-111 .layout-card-w-img-link-desc.section-spacing {padding-top: 0;}
.node-25 .carousel-w-pbar-content .icon-label-wrapper img { aspect-ratio: 1/.9; object-fit: contain; padding: 40px;}
.node-25 .carousel-w-pbar-content .icon-label-wrapper .title{ width: 100%; text-align: center;}
.node-25 .carousel-w-pbar .title { font-size: 28px; font-family: 'Roboto Bold'; color: var(--sc-blue); margin-bottom: 15px; text-transform: none;}
.node-25 .carousel-w-pbar.c-progress-bar > .container { padding: var(--section-inner-padding-x); padding-top: 0;}
.node-25 .carousel-w-pbar.c-progress-bar{ padding-inline: 0;}
.node-25.no-banner .inner-title {font-size: 28px; font-family: 'Roboto Bold'; color: var(--sc-blue);}
.node-25 .carousel-half-w-pbar .content-description{margin-bottom: 30px;}
.node-25.inner-page:not(.same) .carousel-half-w-pbar .section-spacing { padding-bottom: 30px;}
.node-25 .carousel-half-w-pbar:nth-child(3) .card-w-desc-cta {background: var(--gray); color: var(--black);}
.node-25 .carousel-half-w-pbar:nth-child(3) .card-w-desc-cta .title,
.node-25 .carousel-half-w-pbar:nth-child(3) .card-w-desc-cta a {color: var(--black);}
.node-25 .carousel-half-w-pbar:nth-child(3) .card-w-desc-cta a:hover{ color: var(--pc-skyblue);}
.node-152 .breadcrumb > .breadcrumb-item:nth-child(2) { text-transform: uppercase;}
.generic-page.node-152 .banner-wrapper img { aspect-ratio: 1140/500;}

/* Header  */
header{ position: absolute; width: 100%; top: 0; z-index: 5; background: var(--sc-blue); transition: all 400ms;}
.page-node-type-home-page header{background: transparent;}
/* header .nav-link{ color: var(--white); font-family: 'Roboto Bold';} */
header .nav-link:hover{ color: var(--white); border-bottom: 1px solid var(--white);}
header .navbar-expand-lg .navbar-nav .nav-link{ padding: 0; margin: 0.5rem 1.5rem;}
.navbar-brand img{ height: 53px;}
/*  .path-user .navbar{background: var(--sc-darkCyan);} User Page*/
.tbm{position: unset; background: transparent;}
header .tbm-link.level-1{ color: var(--white); font-family: 'Roboto Bold'; text-decoration: none;}
header .tbm-link.level-1:hover{text-decoration: underline; text-underline-offset: 5px;}
.tbm-link.level-1:hover{background: transparent;}
.tbm-item.level-1{border: none;}
.tbm-submenu{ background: var(--sc-blue); font-family: 'Roboto Light';}
.tbm.animate:not(.tbm--mobile) .tbm-item>.tbm-submenu { transition: all 100ms 220ms; border: none; box-shadow: none;}
.tbm .tbm-link-container {color: var(--white);}
.tbm .tbm-item .tbm-link-container .tbm-link.level-2{font-family: 'Roboto Light'; color: var(--white); text-transform: uppercase; padding-bottom: 0; padding-right: 3rem; padding-top: 3px; text-decoration: none; font-weight: normal;}
.tbm .tbm-item .tbm-link-container .tbm-link.level-2:hover{color: var(--white) ; text-decoration: underline; cursor: pointer !important;}
.tbm .tbm-item:first-child .tbm-link-container .tbm-link.level-2{font-family: 'Roboto Bold';}
.tbm .tbm-link-container .tbm-link.level-3,
.tbm .tbm-link-container .tbm-link.level-4{font-family: 'Roboto Light'; color: var(--white); padding: 0.5rem 0px 0 1rem; text-decoration: none;}
.tbm .tbm-link-container .tbm-link.level-3:hover,
.tbm .tbm-link-container .tbm-link.level-4:hover{color: var(--white) ; text-decoration: underline; cursor: pointer !important;}
.tbm-group-container{border: none;}
.tbm-submenu.tbm-item-child > .tbm-row-wrapper{display: flex; justify-content: center; align-items: center;}
.tbm-submenu.tbm-item-child > .tbm-row-wrapper > .tbm-row{ display: flex; justify-content: center; flex-wrap: wrap;}
.tbm-submenu.tbm-item-child > .tbm-row-wrapper > .tbm-row > .tbm-column{width: auto; max-width: 400px;}
.what-we-do-nav.tbm-submenu.tbm-item-child > .tbm-row-wrapper > .tbm-row > .tbm-column{flex: 1 1 0px;}
.tbm-resources-wrapper.tbm-submenu.tbm-item-child > .tbm-row-wrapper > .tbm-row{justify-content: space-evenly ; width: 100%;}
header > nav > .hover-animation { position: absolute; top: 0; left: 0; background: var(--sc-blue); height: 0; width: 100%; z-index: 1; transition: height 200ms; opacity: 1; box-shadow: 0 5px 10px rgba(0,0,0,0.2);}
header > nav > div.container{ z-index: 2;}

/* Inner page  */
.inner-title{ font-size: 28px; font-family: 'Roboto Bold'; margin-bottom: 15px; color: var(--sc-blue);}
.inner-page .section-spacing > p{font-family: 'Roboto Light';   text-align: unset;}
/* .inner-page .section-spacing > p:last-child{margin-bottom: 2.5rem;} */
.inner-page.no-banner{margin-top: 9rem;} 
.page-description{ width: 100%; margin: 0 auto; text-align: center; font-family: 'Roboto Light'; padding: var(--section-inner-padding-x); padding-top: 0; padding-bottom: 0;}
.no-banner h1.title{font-family: 'Roboto Black'; text-transform: none;}

/* Story page  */
.story-page.inner-page.no-banner{ margin-top: 79px;}
.story-page .container-inline div{display: block;}
.container-inline div.row{display: flex;}
.container-inline div.row > div.col-12{padding: 0;}

#block-pemsea-content .node-2029 > section > div > div:nth-child(1) > div > div:nth-child(36) > div.block-text-content-overlap-2.justify-content-.margin-bottom-overlap { margin-bottom: 0;}

/* Block: Inline-container */
/* .parallax{ position: sticky; top: 0; z-index: -1;} */

/* Block: Hero Banner  */
.block-hero-banner-wrapper{position: relative;}
.block-hero-banner-wrapper.parallax img{opacity: 0;}
.parallax{ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 1200ms; aspect-ratio: 1/0.5}
/* .parallax.parallax-show{opacity: 1;} */
/* .parallax:not(.parallax-show) .block-hero-banner-overlay{background-color: var(--pc-skyblue);} */
.block-hero-banner-description{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white); z-index: 5;}
.block-hero-banner-wrapper img{ aspect-ratio: 1/0.5; object-fit: cover;}
.block-hero-banner-description p{font-family: 'Roboto light';}
.block-hero-banner-description h2{ font-size: 40px; text-transform: uppercase; font-family: 'Roboto Black';}
.block-hero-banner-overlay{ position: absolute; background: black; height: 100%; width: 100%; z-index: 1;}
.container-inline{background: var(--black);}

/* Block: Title with Description  */
[data-pemsea-bg="pemsea-bg-White"]{background: var(--white); color: var(--black);}
[data-pemsea-bg="pemsea-bg-Blue"]{background: var(--sc-blue); color: var(--white);}
[data-pemsea-bg="pemsea-bg-Green"]{background: var(--pc-green); color: var(--white);}
.block div.max-height-container { height: 100vh; display: flex;}
.block-title-description-wrapper .container{margin: auto;}
.block-title-description{ padding: 3.5rem 1rem;}
.block-title-description h2 { font-size: 40px; text-transform: uppercase; font-family: 'Roboto Black';}
.block-title-description p{font-family: 'Roboto light';}

/* Block: Description with Image (Left or Right) */
.block .block-description-w-img-wrapper .block-description-w-img-description{ padding: 30px; display: flex; justify-content: center; margin: auto; flex-direction: column; height: 100%;}
.block-description-w-img-description h2{ font-size: 40px; font-family: 'Roboto Black';}
.block-description-w-img-description p{font-family: 'Roboto light';}
.block-description-w-img-wrapper img{ height: 100%; object-fit: cover;}

/* Search  */
.region-nav-additional .custom-search { margin-right: 110px; display: flex; flex-direction: row; align-items: center; gap: 5px; transition: all 300ms; position: relative; z-index: 6;}
.region-nav-additional .custom-search.active{margin-right: 0;}
.region-nav-additional .custom-search label{display: none;}
.region-nav-additional .custom-search input{padding-top: 0;padding-bottom: 0;}
.region-nav-additional .custom-search .custom-search-btn { border: none; background: transparent; padding: 0 5px; color: var(--white);  cursor: pointer;  transition: all 300ms;}
.region-nav-additional .custom-search button.custom-search-btn.active{display: block;}
.region-nav-additional .custom-search span.custom-search-btn.inactive{display: none}
.custom-search button.custom-search-btn{display: none;}
.js input.form-autocomplete{background-image: none; background: transparent; border: none; border-bottom: 1px solid var(--white); color: var(--white); border-radius: 0;}
.js input.form-autocomplete.ui-autocomplete-loading{background-image: none;}
.form-control:focus{border-color: transparent; box-shadow: none;}
#views-exposed-form-search-solr-page-1 .form-type-search-api-autocomplete{width: 0; transition: all 300ms;}
#views-exposed-form-search-solr-page-1 .form-type-search-api-autocomplete.active{width: 110px; transition: all 300ms;}
.custom-search [data-drupal-selector="edit-actions"]{display: none;}
#edit-search-api-fulltext{opacity: 0; width: 0%; margin-left: auto; padding: 0;}
#edit-search-api-fulltext.active{opacity: 1; width: 100%; padding: 0 12px;}

/* Search Page  */
.search-result-page .view-header h3{font-size: 1.3rem; font-family: 'Roboto Medium'; letter-spacing: 1px; margin-bottom: 20px;}
.search-result-page .search-result-wrapper { list-style: none; padding-bottom: 50px;}
.search-result-page .search-item a { text-decoration: none; font-family: 'Roboto Medium'; color: var(--sc-blue);}
.search-result-page .search-item .search-description { padding-left: 15px;}
.search-result-page #block-searchpagetitle h2{ font-size: 1.75rem; font-family: 'Roboto Medium'; color: var(--sc-blue);}
.search-result-page #views-exposed-form-search-solr-page-1 .form-type-search-api-autocomplete{display: flex; flex-direction: row; width: auto; align-items: center; gap: 10px;}
.search-result-page .custom-search{display: flex; align-items: center; gap: 10px;}
.search-result-page .custom-search button.custom-search-btn { border: 1px solid #C0C0C0; padding: 6px 20px; border-radius: 5px; display: block;}
.search-result-page .custom-search span.custom-search-btn{display: none;}
.search-result-page .custom-search input.form-autocomplete {border: 1px solid #C0C0C0; color: var(--black);}
.search-result-page .custom-search label{ text-wrap: nowrap;}
.path-search-view div#block-exposedformsearch-solrpage-1{display: none;}
.search-result-page .block-system-breadcrumb-block nav{padding-top: 50px;}
.search-result-page .block-system-breadcrumb-block nav a{color: var(--black);}

/* Breadcrumbs  */
.block-system-breadcrumb-block nav{ font-family: Roboto Regular;}
.news-page #system-breadcrumb + .breadcrumb,
.inner-page #system-breadcrumb + .breadcrumb{margin-bottom: 0;}
.breadcrumb-item a { color: white; text-decoration: none; transition: all 250ms;}
.breadcrumb-item + .breadcrumb-item::before{display: none;}
.breadcrumb-separator { margin: 0 1rem;}
.breadcrumb-item a:hover { color: var(--pc-skyblue); text-decoration: underline;}
li.breadcrumb-item:last-child { color: var(--pc-green);}


/* Banner section  */
.banner-wrapper{position: relative;}
.banner-overlay{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.65) 8%, rgba(91,91,91,0) 54%, rgba(199,199,199,0) 100%, rgba(255,255,255,1) 100%); z-index: 2;}
.banner-wrapper img{ height: 100vh; object-fit: cover; object-position: center;}
.banner-description{ position: absolute; bottom: 0; color: var(--white); padding: 1.5rem 0; background: linear-gradient(180deg, rgba(24,24,24,0.3) 5%, rgba(21,21,21,0.7) 50%, rgba(0,0,0,1) 100%); width: 100%; z-index: 3;}
.banner-description h1,
.banner-description h2{ font-family: 'Roboto Bold'; letter-spacing: 1px; font-size: 2.5rem;}
.banner-description p{ font-family: Roboto Thin; width: 70%; font-size: 18px;}
.banner-carousel .owl-dots{position: absolute; z-index: 20; left: 50%; transform: translateX(-50%); padding: 0 12px; bottom: 20px; width: 100%; text-align: left; max-width: 1240px; margin: 0 auto;}
.banner-carousel .owl-dots .owl-dot{width: 10px; height: 10px; border-radius: 50%; background: var(--sc-soft-blue);margin: 3px;}
.banner-carousel .owl-dots .owl-dot.active{background: var(--sc-blue);}
.owl-carousel.owl-loaded .owl-nav button{ position: absolute; top: 50%; transform: translateY(-50%); background: var(--sc-blue); color: var(--white); padding: 10px 16px !important; border-radius: 50%; transition: all 250ms; opacity: 0.4; z-index: 3;}
.owl-carousel.owl-loaded .owl-nav button:hover{background: var(--pc-skyblue); opacity: 1;}
.owl-carousel.owl-loaded .owl-nav button svg{ transform: translateY(2px); font-size: 18px;}
.owl-nav button.owl-prev{left: 50px;}
.owl-nav button.owl-next{right: 50px;}
.c-progress-bar .owl-nav button.owl-prev{left: -70px;}
.c-progress-bar .owl-nav button.owl-next{right: -70px;}

/* Generic page  */
.generic-page .banner-wrapper img,
.event-page .banner-wrapper img,
.news-page .banner-wrapper img,
.generic-banner .banner-wrapper img{ height: auto; aspect-ratio: 1/0.25; object-fit: cover;}
.page-node-type-generic-page-w-carousel .generic-page .banner-wrapper img,
.page-node-type-projects .generic-page .banner-wrapper img{ aspect-ratio: 1140/500;}
/* .generic-page.node-27 .section-spacing,
.generic-page.node-56 .section-spacing,
.generic-page.node-77 .section-spacing{padding-bottom: 1rem} */

.banner-w-carosel .owl-carousel {position: unset;}
.banner-carousel-body .owl-dots{position: absolute; z-index: 20; left: 50%; transform: translateX(-50%); padding: 0 12px; bottom: 20px; width: 100%; text-align: left; max-width: 1240px; margin: 0 auto;}
.banner-carousel-body .owl-dots .owl-dot{width: 10px; height: 10px; border-radius: 50%; background: var(--sc-soft-blue);margin: 3px;}
.banner-carousel-body .owl-dots .owl-dot.active{background: var(--sc-blue);}

/* Special Page  */
.special-page .banner-wrapper img { height: auto; aspect-ratio: 1/0.35; object-fit: cover;}
.news-landing-page.special-page .banner-wrapper img{ aspect-ratio: 1/0.25;}
/* Event inner Page  */
.event-page .title{text-align: center; font-size: 2rem; margin-bottom: 0; text-transform: none;}
.event-page .section-spacing{padding: var(--section-inner-padding-x);}
.sticker-wrapper {display: flex; gap: 15px; flex-wrap: wrap;}
.date-sticker,
.event-sticker{border: 2px solid var(--sc-Cyan); padding: 4px 10px; border-radius: 7px; text-transform: uppercase;}
.sticker-wrapper.event-header{ flex-direction: column; gap: 5px; text-align: center; justify-content: center; align-items: center;}
.date-sticker{color: var(--sc-Cyan);}
.event-sticker.past{border-color: var(--pc-brown);color: var(--pc-brown);}
.event-sticker{border-color: var(--sc-yellow); text-transform: uppercase; color: var(--sc-yellow);}
.upper-content{margin-bottom: 3rem;}
.upper-content p{margin-bottom: 0;}
/* .bottom-content{ padding-right: 5rem;} */
.event-page .bottom-content > img { margin-bottom: 15px;}
.bottom-content > img{/*margin-bottom: 2rem; */ width: 100%; position: relative; left: 50%; transform: translateX(-50%);}
.bottom-content p{margin-bottom: 0; /*text-align:unset;*/}
.bottom-content p em{font-size: 14px;}
.bottom-right-content{padding: 0; margin-top: 40px;}
.ue-wrapper ul{padding: 0; list-style: none; row-gap: 20px; padding-top: 1.5rem; padding-bottom: 1.5rem;}
.ue-wrapper .row li > .views-field,
.ue-wrapper .row li > .views-field .field-content {height: 100%;}
.event-card{ display: flex; flex-direction: column; box-shadow: 0px 3px 6px #00000029; height: 100%;}
.event-card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column;}
.event-card a:has(img){display: block; overflow: hidden;}
.event-card img { aspect-ratio: 410/231; object-fit: cover; object-position: top; transition: all 300ms;}
.event-card img:hover{transform: scale(1.06);}
.event-card-body h3 { font-size: 1.2rem; font-family: 'Roboto Bold'; margin-bottom: 2rem;}
.event-card-date { border: 2px solid var(--sc-Cyan); color: var(--sc-Cyan); padding: 4px 10px; border-radius: 7px; width: fit-content; margin-top: auto;}


/* Content: Events  */
.events-wrapper .ue-wrapper ul{padding: 0;}
.content-events { padding-top: 2rem;}
.events-wrapper .ue-wrapper li > div,
.events-wrapper .ue-wrapper li > div > div,
.events-wrapper .ue-wrapper .event-card{height: 100%;}
.events-wrapper .ue-wrapper .event-card{border-radius: 10px 10px 0 0; overflow: hidden;}
.events-wrapper .ue-wrapper .event-card-body{flex-grow: 1; display: flex; flex-direction: column;}
.events-wrapper .ue-wrapper .event-card-date{margin-top: auto ;}

/* News inner Page  */
.news-page .title{text-align: left; font-size: 1.5rem; margin-bottom: 0.8rem; text-transform: none;}
.news-page .n-wrapper{padding-top: 1.5rem; padding-bottom: 1.5rem;}
.news-page .section-spacing{    padding: var(--section-inner-padding-x);}
.news-page.node-1057 .bottom-content > img,
.news-page.node-1055 .bottom-content > img { width: auto; height: 300px;}
.news-page blockquote { border-left: 2px solid rgba(75,75,75,0.6); padding: 5px 15px; }
.news-page blockquote * { font-size: 1.063rem; }

/* Modifies the default size of the images under the news page of PEMSEA */
.news-page .bottom-content p:has(img), .news-page .bottom-content img:not(:first-child) { max-width: 700px; margin: 0 auto; padding: 1em; background-color: whitesmoke;}
.news-page .bottom-content p:has(img) + p.text-align-center:not(:empty), 
.news-page .bottom-content p:has(img) + p.text-align-center:not(:empty) em, 
.news-page .bottom-content img:not(:first-child) + p.text-align-center:not(:empty), 
.news-page .bottom-content img:not(:first-child) + p.text-align-center:not(:empty) em 
{ max-width: 700px; padding: 1em; padding-top: 0; margin: 0 auto; background-color: whitesmoke; font-size: 0.8rem;}

/* News Landing page  */
.news-landing-page .content-node .container.section-spacing{max-width: 100%; padding: 0%;}
.month-link-class {display: none;}
.view-grouping .view-grouping-header { font-size: 1.3rem; font-family: 'Roboto Bold'; position: relative;}
.view-grouping .view-grouping-header svg { position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(180deg); transition: all 300ms;}
.view-grouping .view-grouping-header.collapsed svg { position: absolute; right: 30px; top: 50%; transform: translateY(-50%) rotate(0);}
.view-grouping .view-grouping-content {padding-left: 15px;}
.view-grouping .view-grouping-content h3{ font-size: 1.105rem;}
.view-grouping .view-grouping-content h3 a { text-decoration: none; color: var(--sc-blue);}
.news-landing-page .news-wrapper .inner-title{display: none;}
.news-landing-page .news-wrapper .content-news{padding-top: 0;}

/* Events Landing page  */
.event-landing-page .content-node .container.section-spacing{max-width: 100%; padding: 0%;}
.event-landing-page .events-wrapper .inner-title,
.event-landing-page .events-wrapper > p{display: none;}
.event-landing-page .content-node .events-desc{font-family: 'Roboto Regular';}
.event-landing-page .events-wrapper .content-events{padding-top: 0;}

/* Partnership paragraph  */
.partnership-for-east{ border-bottom: 1px solid rgba(75,75,75,0.4);}
.partnership-description p{ text-align: center; width: 80%; margin: 0 auto; font-family: 'Roboto Regular';}
.partnership-half{ margin-top: 3rem;}
.partnership-half > p{ width: 100%; text-align: unset;}
.partnership-half > p:not(.small-title){ margin-bottom: 4rem; min-height: 150px; padding-right: 30px;}
.partnership-half.right > p:not(.small-title){ margin-bottom: 4rem; min-height: 150px; padding-right: 30px;}
.partnership-half.left{ border-right: 1px solid rgba(75,75,75,0.4);}
.partnership-half.right{ padding-left: 40px;}
.title-w-counter .small-title{ color: var(--sc-yellowGreen); width: 100%; line-height: 22px; margin: 0;}
.title-w-ctr-value{ font-size: 100px; font-family: 'Roboto Bold'; color: var(--black); line-height: 1; margin-bottom: 1.2rem; display: block;}
.coastline-ctr .small-title{ line-height: 22px; color: var(--black); text-transform: none;}
.coastline-ctr .coastline-value{ font-size: 70px; font-family: 'Roboto Bold'; color: var(--black); line-height: 70px; margin-bottom: 3rem;}

/* Paragraph Highlight */
.highlights.container{max-width: calc(1240px + 70px)}
.highlight-content{padding: 0 50px;}
.viewsreference--view-title{display: none;}
.highlight-wrapper ul{padding: 0; list-style: none;}
.highlight-wrapper .owl-stage{padding: 0 35px 25px 0;  display: flex; justify-content: stretch; }
.highlight-wrapper .owl-item{height: inherit;}
.highlights-item {padding: 0; box-shadow: 10px 7px 16px rgba(75,75,75,0.75); height: 100%;}
.highlights-item img{ aspect-ratio: 1/0.6;object-fit: cover; object-position: top;}
.card-item{ display: flex; flex-direction: column; height: 100%; position: relative;}
.card-item a:has(img){overflow: hidden;}
.card-item a:has(img) img{transition: all 250ms;}
.card-item a:has(img) img:hover{transform: scale(1.06);}
.card-information{padding: 15px; flex-grow: 1; display: flex;flex-direction: column;}
.card-information p { font-family: 'Roboto bold'; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;}
.card-information span { font-family: 'Roboto light'; font-size: 14px;  margin-top: auto;}
.highlights-item div:not(.card-information){height: 100%;}
.card-overlay{ position: absolute; left: 0; top: 0; z-index: 1;}
.highlights-item div.card-overlay{height: fit-content;}
.card-overlay p{margin: 0; padding: 5px 15px; color: var(--white); text-transform: uppercase; font-family: 'Roboto Bold'; font-size: 14px;}
.overlay-green{background: var(--sc-yellowGreen);}
.overlay-cyan{background: var(--sc-Cyan);}
.overlay-skyblue{background: var(--pc-skyblue);}
.highlight-wrapper .owl-nav button.owl-next{right: -50px;}
.highlight-wrapper .owl-nav button.owl-prev{left: -50px;}

/* Paragraph Project  */
.project-wrapper ul{padding: 0; list-style: none;}
.projects{background: var(--sc-soft-blue)}
.projects > .container{ padding-block: 1.5rem;}
.projects-item .card-information{ position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); color: var(--white); min-height: 125px; font-size: 23px; height: 150px;}
.project-wrapper .card-item{overflow: hidden; }
.project-wrapper .card-item img{transition: transform 300ms; pointer-events: none; aspect-ratio: 278/370; object-fit: cover; object-position: center;}
.project-wrapper .card-item:hover img{transform: scale(1.06);}
.projects-content{padding-inline: 50px;}
.projects .container{max-width: calc(1240px + 70px)}
.projects-content .owl-nav button.owl-prev { left: -50px;}
.projects-content .owl-nav button.owl-next { right: -50px;}

/* Paragraph Our Works */
.our-works.section-spacing{padding: 4rem 0 8rem;}
.our-works{position: relative;}
.our-works > img{ position: absolute; top: 0; left: 0; height: 100%; object-fit: cover;}
.our-works .title{position: relative; color: var(--white);}
.our-works-content{position: relative; width: 70%; margin: auto; background: rgba(0,0,0,0.7); padding:4rem 2rem; padding-bottom: 1rem;}
.our-works-content > .row{justify-content: center;}
.icon-label-wrapper{text-align: center; overflow: hidden; transition: transform 300ms;}
.icon-label-wrapper:hover{transform: scale(1.06); cursor: pointer;}
.icon-label-wrapper .title{ text-transform: none; color: var(--white); font-size: 22px; width: 100%; display: block; line-height: 1.3; margin: 15px 0 2.5rem;}
.icon-label-wrapper img{ width: 55%;}

/* Paragraph Promo Image Banner */
.promo-img-banner{position: relative; padding-bottom: 90px;}
.promo-img-banner > img {position: absolute; height: 100%; object-fit: cover; left: 0; right: 0;}
.promo-img-banner .content { position: relative; }
.promo-img-banner .content img { max-width: 450px; padding-top: 80px; }
.promo-img-banner .content h3 { text-transform: uppercase; font-family: 'Bebas regular'; color: var(--white); font-size: 2.4rem; margin-top: 1em; }
.promo-img-banner .content h2 { font-family: 'Avenirnext bold'; color: var(--white); font-size: 2.8rem; }
.promo-img-banner .content h2 strong { font-family: 'Avenirnext bold'; color: var(--green2); font-size: 2.8rem; text-shadow: -4px 2px 3px rgba(61,61,61,.5);}
.promo-img-banner .content span{ font-family: 'Avenirnext regular'; font-size: 1.5rem; color: var(--white);}
.promo-img-banner .content .bullet { margin-inline: .5em; }
.promo-img-banner .register-button a{ display: inline-block; text-decoration: none; color: var(--white); border: 3px solid var(--white); padding: 5px 30px; font-size: 1.3rem; border-radius: 30px; font-family: 'Avenirnext regular'; font-weight: 700; }
.promo-img-banner .register-button { padding-top: 2em; padding-bottom: .5em; }

/* Paragraph Where we are  */
#map{height: 100%;}
.map-wrapper{padding: 0; min-height: 450px; position: relative;}
.map-info-wrapper{ height: 70vh; background: var(--pc-skyblue); padding: 3rem 2.5em; color: white;}
.map-title{ text-transform: uppercase; font-family: Roboto Bold;}
.map-description{ font-family: Roboto Light;}
.map-legend-wrapper { position: absolute; top: 12px; right: 12px; z-index: 400; background: var(--white); box-shadow: 0 1px 5px rgba(0,0,0,0.65); padding: 10px; min-width: 150px;}
.map-legend p { margin-bottom: 0; max-width: 200px;}
.map-legend img { width: auto; height: 20px; margin-top: 2px;}
.map-legend { display: flex; column-gap: 5px; margin-bottom: 5px;}
.map-legend-wrapper h6 { font-family: 'Roboto Bold';}
.map-legend-icon-wrapper .map-legend:last-child { margin: 0;}
.map-legend svg { margin-block: auto; margin-left: auto; padding-right: 5px; font-size: 0.9rem; display: none; color: var(--black);}
.map-legend svg:hover{cursor: pointer;}
.pinloc-filter-btn:not(.pin-icon-hide) .fa-eye { display: inline-block;}
a.pinloc-filter-btn.pin-icon-hide .fa-eye-slash { display: inline-block;}
/* a.pinloc-filter-btn {
    margin-left: auto;
} */
.green-pin.pin-hide,
.blue-pin.pin-hide,
.red-pin.pin-hide{display: none;}

/* .leaflet-popup{display: none !important;} */

/* Paragraph Layout: Wysiwyg  */
.layout-wysiwyg h2{ font-size: 28px; font-family: 'Roboto Bold'; margin-bottom: 15px;}
.layout-wysiwyg h2 strong{font-size: 28px; font-family: 'Roboto Bold'; color: var(--sc-blue); margin-bottom: 15px;}
.layout-wysiwyg h6 strong{color: var(--sc-blue); font-family: 'Roboto Bold';}
.layout-wysiwyg p{ font-size: 1rem; font-family: 'Roboto Regular'; margin-bottom: 10px; text-align: unset;}
.layout-wysiwyg table { width: 100%;}
.layout-wysiwyg table tr { border: 1px solid;}
.layout-wysiwyg table td{ vertical-align: baseline; padding: 10px; border-right: 1px solid;}

/* Paragraph Content: News */
/* .news-wrapper h2{ font-size: 28px; font-family: 'Roboto Bold'; margin-bottom: 15px; color: var(--sc-blue);}
.news-wrapper > p{font-family: 'Roboto Regular';  margin-bottom: 2.5rem; text-align: unset;} */
.n-wrapper ul{padding: 0; list-style: none; row-gap: 1.5rem;}
.news-wrapper .card-information p{font-family: 'Roboto Bold'; font-size: 18px; margin-bottom: 1.5rem;}
.card-item.news{ box-shadow: 0px 3px 6px #00000029; border-radius: 10px 10px 0 0; overflow: hidden;}
.n-wrapper .views-field,
.n-wrapper .field-content{ height: 100%;}
.card-item.news img { aspect-ratio: 1/0.6; overflow: hidden; transition: all 250ms; object-fit: cover; object-position: center 30%;}
.card-item.news a:has(img){overflow: hidden;}
.card-item.news a img:hover{transform: scale(1.06);}
.content-news{padding-top: 2rem;}

/* Corporate Policies  */
.pdf-card-wrapper ul {padding: 0; list-style: none; row-gap: 30px;}
.card-item.pdf{ box-shadow: 0px 3px 6px #00000029; border-radius: 10px 10px 0 0; overflow: hidden;}
.card-item.pdf img { overflow: hidden; transition: all 250ms; object-fit: cover; }
.card-item.pdf a:has(img){overflow: hidden;}
.card-item.pdf a img:hover{transform: scale(1.06);}
.card-item.pdf a { text-decoration: none; text-align: center;}
.card-item.pdf .card-information { color: var(--black);}
.pdf-card-wrapper li > div {height: 100%;}

/* Paragraph Content: Country Partner */
.country-partner-wrapper.section-spacing{ padding-top: 0;}
.cp-wrapper ul{padding: 0; list-style: none;}
.country-partner-item p{ text-align: center; margin-bottom: 2rem; padding-top: 10px; font-family: 'Roboto Regular';}
.country-partner-item a { display: block;}
.country-partner-item a img{transition: all 300ms; aspect-ratio: 246/147; object-fit: contain;}
.node-56 .country-partner-item a img{padding: 10px;}
.country-partner-item a img:hover{ transform: scale(1.06);}

/* Paragraph Content: Publication  */
.pt-wrapper ul {padding: 0; list-style: none; row-gap: 1.5rem;}
.pt-wrapper .views-field,
.pt-wrapper .field-content{ height: 100%;}
.card-item.publication-type{text-align: center; box-shadow: 0px 3px 6px #00000029; border-radius: 10px; padding: 1.5rem 1rem;}
.card-item.publication-type:hover {outline: 1px solid var(--pc-skyblue);}
.card-item.publication-type:hover img{ transform: scale(1.08);}
.card-item.publication-type img{ width: 40%; margin: auto; margin-bottom: 2rem; padding: 1.5rem; transition: all 250ms;}
.card-item.publication-type .card-information h3{ font-size: 18px; font-family: 'Roboto Bold';}
.card-item.publication-type a{ text-decoration: none; color: var(--black);}
.card-item.publication-type .card-information p{ font-family: 'Roboto Regular'; font-size: 14px; width: 90%; margin: auto;}
.content-publicaton-type{padding-top: 2rem;}
.main-pub-sidebar ul li ul { list-style: none;}
.main-pub-sidebar ul.navbar-nav a.active {
    color: var(--pc-green);
    font-family: 'Roboto Medium';
}

/* Paragraph Layout: Carousel wtih Progressbar  */
.carousel-w-pbar-content .icon-label-wrapper{width: 100%;}
.carousel-w-pbar-content .icon-label-wrapper:hover{transform: scale(1);}
.carousel-w-pbar-content .icon-label-wrapper img{width: 100%;}
.carousel-w-pbar-content .icon-label-wrapper .title{  margin: 0; color: var(--black); text-align: left; font-family: 'Roboto Regular'; font-size: 16px; width: 80%;}
/* .c-progress-bar .owl-carousel.owl-loaded .owl-nav button{position: unset; transform: none; margin-right: 15px;}
.c-progress-bar .owl-carousel.owl-loaded .owl-nav{ margin-top: 3rem; position: relative;} */
.prog-bar-before,
.prog-bar-after{position: absolute; top: 50%; left: var(--progressMargin);  height: 4px; transform: translateY(-50%); transition: all 300ms;}
.prog-bar-before{background: rgba(0,154,178,0.3); width: calc(100% - var(--progressMargin)); z-index: 1;}
.prog-bar-after{background: var(--sc-blue); z-index: 2;}

/* Paragraph Layout: Card W/ Overlap description */
.no-banner .inner-title{text-align: center; color: var(--sc-Cyan); font-size: 2rem;}
.content-description{text-align: unset; font-family: 'Roboto Light';}
.cards-w-overlap-description .content-description{margin-bottom: 2rem;}
.card-w-overlap-dec-body{position: relative; }
.card-w-overlap-dec-content{position: absolute; bottom: 0; background: linear-gradient(180deg,rgba(24,24,24,0.3) 5%,rgba(21,21,21,0.7) 50%,rgba(0,0,0,1) 100%); padding: 20px; width: 100%; /*border-top-right-radius: 20px;*/}
.card-w-overlap-dec-content .title { color: var(--white); font-size: 1.3rem; line-height: 1.3; margin-bottom: 1rem; display: block; text-align: left;}
.card-w-overlap-dec-content .content-description{ text-align: left; color: var(--white); margin-bottom: 1rem;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 20px;}
.card-w-overlap-dec-content .content-description p:last-child{margin-bottom: 0;}
.card-w-overlap-dec-content a{ color: var(--white); text-decoration: none; font-family: 'Roboto Bold'; font-size: 0.9rem;}
.card-w-overlap-dec-wrapper img { aspect-ratio: 1/0.8; object-fit: cover;}
.card-w-overlap-dec-content a svg{margin-left: 0.5rem; transform: scale(0.7);}

/* Paragraph Layout: Carousel Half item with progress bar  */
.carousel-half-w-pbar .content-description{ margin-bottom: 50px;}
.carousel-half-item .owl-stage{display: flex;}
.carousel-half-item .owl-stage .card-w-desc-cta{height: 100%;}
.carousel-half-item .owl-stage .card-w-desc-cta .title{font-size: 1.2rem;}
.carousel-half-w-pbar .card-w-desc-cta .content-description{margin: 1rem;}
.carousel-half-w-pbar .owl-item{min-height: 300px;}
.carousel-half-w-pbar{padding: 0; position: relative;}
.carousel-half-w-pbar > img{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;}
.carousel-half-w-pbar > .container{position: relative; z-index: 1;}

/* Paragraph Card w description and cta   */
.card-w-desc-cta{background: var(--sc-Cyan); color: var(--white); padding: 30px; display: flex; justify-content: space-between; align-items: center; flex-direction: column;}
.card-w-desc-cta .title{font-size: 1.8rem;line-height: 1.3; color: var(--white);}
.card-w-desc-cta .content-description p{margin-bottom: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.card-w-desc-cta a{ color: var(--white); font-family: 'Roboto Bold'; font-size: 0.9rem;}
.card-w-desc-cta a:hover { color: var(--pc-skyblue);}
.card-w-desc-cta a svg{ margin-left: 0.5rem; transform: scale(0.7);}

/* Paragraph Layout: Carousel Views with Progress Bar  */
.n-wrapper .owl-stage{display: flex; padding-bottom: 10px;}
.n-wrapper .owl-stage .items{height: 100%;}

/* Paragraph Layout:  Carousel Videos with Progress Bar  */
.vid-wrapper ul{list-style: none; padding: 0; margin-bottom: 0; row-gap: 25px;}
.vid-wrapper ul .items{ border-radius: 20px; overflow: hidden;}
.vid-wrapper video,
.vid-wrapper iframe{ width: 100%; height: auto; background: rgba(75,75,75,0.3); aspect-ratio: 330/380;}
.vid-wrapper.videos-grid video,
.vid-wrapper.videos-grid iframe{aspect-ratio: 343/193;}
.node-1359.inner-page:not(.same) .layout-views.section-spacing,
.node-1360.inner-page:not(.same) .layout-views.section-spacing{padding-block: 20px; padding-inline: calc(80px - 12px);}
.story-grid-wrapper ul { list-style: none; padding: 0; row-gap: 25px;}
.story-grid-wrapper li img { aspect-ratio: 343/193; object-fit: cover;}

/* Paragraph Layout: Carousel with Highlight image  */
.fic-wrapper ul{list-style: none; padding: 0; margin-bottom: 0;}
.fic-wrapper ul .items{ border-radius: 20px; aspect-ratio: 330/380; overflow: hidden; object-fit: cover; border: 1px solid var(--sc-Cyan);}
.fic-wrapper .owl-item img{aspect-ratio: 330/380; object-fit: contain;}
.carousel-feature-img-content > img{ width: 100%; height: auto; aspect-ratio: 1/0.5; object-fit: cover; margin-bottom: 2rem; border-radius: 20px;}

/* Paragraph Content: Card With Image, Link, Description  */
.card-image{display: flex; justify-content: center; align-items: center;}
.card-image img{ width: auto; max-height: 200px; margin: auto;padding: 20px;}
.card-w-img-link-desc{ margin-bottom: 30px; /* box-shadow: 0px 3px 6px #00000029;*/}
.card-w-img-link-desc.card-border{border: 1px solid var(--pc-skyblue); border-radius: 8px; }
.card-w-img-link-desc.card-border > .row{width: 100%; margin: 0;}
.card-w-img-link-desc:last-child{margin-bottom: 0;}
.card-w-img-link-desc p{margin-bottom: 0; font-size: 1rem;}
.card-w-img-link-desc .title{text-transform: none; font-size: 1.3rem; margin-bottom: calc(var(--title-margin-bottom) - 14px); text-align: left; margin-bottom: 20px;}
.card-w-img-link-desc .card-info{ padding: 0; display: flex; flex-direction: column; justify-content: center;}
.node-135 .card-w-img-link-desc .card-info{padding: 0; padding-bottom: 10px;}
.node-135 .card-w-img-link-desc .col-12.col-md-12.card-info{padding: 0;}
.node-135 .card-w-img-link-desc { box-shadow: none;}
/* .card-w-img-link-desc .col-12.col-md-12.card-info{ padding: 30px 50px;} */
.card-w-img-link-desc.card-border .col-12.col-md-12.card-info{padding: 25px;}
/* .section-spacing ~ .section-spacing { padding-top: 0;} */
.card-w-img-link-desc a{ text-decoration: none; margin-top: 1rem; color: var(--sc-blue);}
.card-w-img-link-desc a svg{margin-left: 1rem;}

/* Views: Timeline  */
.timeline-items{ padding: 0; list-style: none;}
.timeline-items .timeline-main-wrapper{ margin: 0;}
.timeline-wrapper{ display: grid; grid-template-areas: "tl-img tl-s tl-d"; grid-template-columns: 1fr 60px 1fr;}
.timeline-main-wrapper:nth-child(even) .timeline-wrapper{grid-template-areas: "tl-d tl-s tl-img";}
.timeline-image {grid-area: tl-img; text-align: center;padding: 50px 20px;}
.timeline-image img{ width: auto; max-height: 300px;}
.timeline-separator{grid-area: tl-s; position: relative;}
.timeline-separator::before{content: ''; position: absolute; top: 0; width: 2px; height: 100%; background: var(--black); left: 50%; transform: translateX(-50%);}
.timeline-main-wrapper:first-child .timeline-separator::before{background: linear-gradient(180deg, rgba(24,24,24,0.0) 0%, rgba(21,21,21,0.7) 49%, rgba(0,0,0,1) 100%);}
.timeline-separator::after{ content: ''; width: 20px; height: 20px; background: var(--sc-blue); position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%);outline: 7px solid var(--white);}
.timeline-description{grid-area: tl-d;display: flex; flex-direction: column; margin: auto; padding: 20px; color: var(--black);}
.timeline-description h2{ font-family: 'Roboto Bold';}

/* Paragraph Layout: Center Img With Description  */
.layout-center-img-description {text-align: center;}
.layout-center-img-description > img { max-height: 120px; width: auto; margin-bottom: 1.5rem;}
/* Special case for IRBM landing page */
.node-9 .layout-center-img-description > img { max-width: 460px;}

.layout-center-img-description.teaser-size img{max-height: unset; width: 80%;}
.layout-center-img-description .inner-title{text-align: left;}
.layout-center-img-description-wrapper {text-align: left;}
.node-93 .layout-center-img-description.section-spacing{padding-bottom: 0;}

/* Paragraph Layout: Card W/ Img Link Desc  */
.layout-card-w-img-link-desc > h2 { font-size: 28px; font-family: 'Roboto Bold'; color: var(--sc-blue); margin-bottom: 15px;}

/* Paragraph Layout: 2 columns  */
.layout-2-columns-list{ color: var(--white); position: relative; margin-top: 3rem;}
.layout-2-columns-list .container.section-spacing{padding-bottom: 3rem;}
.layout-2-columns-list .inner-title{text-align: center;  position: relative; color: var(--white);}
.layout-2-columns-list .inner-title.left{text-align: left; }
.layout-2-columns-list .inner-title.right{text-align: right; }
.layout-2-columns-list .row{row-gap: 20px;}
.layout-2-columns-list .col-2-item {position: relative; font-family: 'Roboto Light';}
.layout-2-columns-list .col-2-item:before { content: ''; position: absolute; top: 8px; left: -5px; width: 7px; height: 7px; background: var(--white); border-radius: 50%;}
.layout-2-columns-list img{ position: absolute; top: 0; height: 100%; object-fit: cover;}

/* Paragraph Layout: Image with Title & description */
.layout-img-w-title-description .row{row-gap: 20px;}

/* Paragraph Layout: Title Description With Solid Background */
.layout-title-description-w-solid {background: var(--sc-Cyan); color: var(--white); text-align: center; margin-top: 3rem;}
.layout-title-description-w-solid .container.section-spacing{ padding-bottom: 20px; padding-top: 20px;}
.layout-title-description-w-solid p{margin: 0;}
.layout-title-description-w-solid .inner-title{color: var(--white);}
.pdf-items-container ul { padding: 0; list-style: none; row-gap: 20px;}
.pdf-item .pdf-item-title{font-family: 'Roboto Bold';font-size: 22px;}
.pdf-item .pdf-item-title a{text-decoration: none; color: var(--black);}
.pdf-item .pdf-item-title a:hover{ color: var(--sc-blue);}
.pdf-item{display: flex;flex-direction: column; font-family: 'Roboto Light'; font-size: 14px; text-align: center; padding: 20px; border: 1px solid var(--sc-blue); border-radius: 10px;}
.pdf-items-container li div{height: 100%;}
.pdf-items-container .cta-btn-blue{margin-top: auto;}
.pdf-items-container .publication-title{text-wrap:unset; overflow: unset;}

/* Footer  */
footer{ background: var(--sc-darkCyan); color: var( --white); padding: 0;}
.footer-container{ padding: 2rem 0;}
footer nav{font-family: 'Roboto Medium';}
footer nav h5{text-transform: uppercase;}
footer .navbar-nav{font-family: 'Roboto Light';}
footer .navbar-nav .nav-link{padding: 0;}
.footer-description{ text-align: right;}
.social-icons{ font-size: 2em;}
.social-icons a{ color: var(--white); padding: 0 2px;}
#block-customfooterlogo img{width: auto; height: 50px; margin-bottom: 50px;}
footer .blue-divider{ height: 15px; background: #00505D; border-top: 1px solid rgb(75,75,75);}

/* Publication type  */
.publication-type-page .content-wrapper ul li{ margin: 0;}
.publication-type-page .content-wrapper .main-pub-content ul{padding: 0; list-style:none; row-gap: 35px;}
.publication-card { height: 100%; padding: 30px; display: grid; align-items: center; border-radius: 15px; gap: 30px; grid-template-columns: 150px 1fr; min-height: 200px;}
.publication-card > .publication-img-body { max-width: 150px; display: grid; place-items: center;}
.publication-body { display: flex; flex-direction: column; justify-content: center;}
.publication-title { font-family: 'Roboto Bold'; text-align: left; font-size: 1.3rem; margin-bottom: 20px; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
h3.publication-title a { text-decoration: none; color: var(--sc-blue);}
.publication-overview { text-align: left; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 20px;}
.publication-overview > p:last-child { margin-bottom: 0;}
.publication-card-wrapper .row .views-field,
.publication-card-wrapper .row .field-content{height: 100%;}
.publication-cta{ display: flex; flex-direction: column; align-items: center; row-gap: 10px; margin-top: auto;}
.publication-cta a {color: var(--white); text-decoration: none; text-transform: uppercase; padding: 9px 20px; display: block; width: 100%; text-align: center; letter-spacing: 1px; font-weight: 700; border-radius: 15px;}
.publication-cta a.cta-view-article {background: var(--sc-darkCyan);}
.publication-cta a.cta-download-pdf {background: var(--sc-blue);}

/* Publication Inner page  */
.publication-inner-page .title{text-align: left; font-size: 1.5rem; margin-bottom: 40px; text-transform: none}
.publication-inner-page .teaser-img-wrapper { max-width: 450px; width: 100%; margin-inline: auto; margin-top: 50px; text-align: center;}
.publication-inner-page .teaser-img-wrapper img {width: 75%;}
.publication-inner-page .cta-wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 20px;}
.publication-inner-page .cta-wrapper a { background: var(--sc-blue); color: var(--white); padding: 10px 20px; text-decoration: none; text-transform: uppercase; border-radius: 15px; width: fit-content;}
.publication-inner-page .publication-information { border: 2px solid var(--sc-Cyan); padding: 30px; margin-top: 50px; border-radius: 15px;}
.publication-inner-page .publication-information .pub-title {font-weight: 700;}
.publication-inner-page .publication-information .row div:last-child p:last-child{margin-bottom: 0;}
.publication-inner-page .related-pub-wrapper{margin-top: 50px;}
.publication-inner-page .related-pub-wrapper h4 { font-family: 'Roboto Bold';}
.publication-card-wrapper ul{padding: 0; list-style:none; row-gap: 35px;}
.publication-inner-page .modal .modal-body .overview { display: -webkit-box; overflow : hidden; text-overflow: ellipsis; -webkit-line-clamp: 8; -webkit-box-orient: vertical; }
.publication-inner-page #edit-container.form-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px;}
.publication-inner-page #edit-container.form-wrapper .form-control:focus { border-color: unset; box-shadow: unset;}


/* Partners Inner page  */
.middle-box { max-width: 375px; margin-inline: auto; border: 2px solid var(--sc-Cyan); padding: 20px 30px; border-radius: 10px; margin-bottom: 30px;}
.middle-box p {margin-bottom: 5px;}
.middle-box p.partner-title {font-weight: 700;}
.focal-wrapper p.partner-title.focal{font-family: 'Roboto Bold';}
.focal-wrapper{ background: #E6E7E8; padding: 20px;}
.middle-box > img { margin-bottom: 25px; width: 60%; display: block; margin-inline: auto;}
.middle-box h2 { text-align: center; font-size: 1.5rem; text-transform: uppercase; font-family: 'Roboto Medium'; color: var(--sc-blue);}
.middle-box .row > div { padding: 0;}
.partner-inner-page .country-partner-item p{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.partner-inner-page .content-description {margin-bottom: 50px;}
.partner-inner-page.inner-page .section-spacing .partner-other-title{font-size: 1.2rem; margin-bottom: 20px; font-family: 'Roboto Bold';}
.publication-card-wrapper .owl-stage{display: flex;}
.publication-card-wrapper .owl-stage .owl-item .items{height: 100%;}
.middle-box h1 { font-size: 1.75rem; text-align: center; font-family: 'Roboto Bold'; text-transform: uppercase; margin-bottom: 20px;}

/* Management and Secretariat */
.person-wrapper .content-overview h2{ font-size: 2rem; font-family: 'Roboto Bold'; margin-bottom: 15px;}
.person-wrapper .content-overview h2 strong{font-size: 2rem; font-family: 'Roboto Bold'; color: var(--sc-blue); margin-bottom: 15px;}
.person-wrapper .content-overview p{ font-size: 1rem; font-family: 'Roboto Regular'; margin-bottom: 10px; text-align: unset;}
.person-card-wrapper ul{padding: 0; list-style: none; clear: both; display: table;}
.person-card { background: var(--sc-Cyan); color: var(--white); height: 100%; padding: 30px; display: flex; flex-direction: column; margin-bottom: 22px;}
.person-card-image img { border-radius: 50%; aspect-ratio: 1/1; object-fit: cover;}
.person-card-body { display: flex; flex-direction: column; padding-top: 30px; height: 220px;}
.person-card-wrapper li { display: inline-block;}
.person-card-wrapper ul.row-show li {float: none;}
.person-card-wrapper ul.row-show li.person-show { float: left; display: none;}
.person-card-wrapper li > div,
.person-card-wrapper li > div .field-content{display: block; height: 100%;}
.person-card-body h4 { font-family: 'Roboto Bold';}
.person-card .person-card-body a {cursor: pointer; display: block; width: fit-content; margin-top: auto; padding: 6px 20px; background: var(--white); color: var(--sc-Cyan); font-family: 'Roboto Bold';}
.person-card .person-card-body a:hover{color: var(--sc-Cyan); filter: brightness(1.05);}
/* .person-card-body p { margin-bottom: 60px;} */
.person-card-body p.person-country{margin-bottom: 0;}
.person-card-body p.person-position{text-wrap: balance;}
.person-description{display: none;}
.person-full-description { background: #F5F5F5; padding: 30px; margin-bottom: 20px; margin-top: 20px;}
.person-full-description > div { font-size: 0.95rem;}
.person-full-description > p { color: gray;}
.person-full-description h4 { font-family: 'Roboto Bold'; text-transform: uppercase; font-size: 1.3rem;}
.person-card-wrapper li.active-person{position: relative;}
.person-card-wrapper li.active-person::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 35px solid transparent; border-right: 35px solid transparent; border-top: 50px solid var(--sc-Cyan); z-index: -1;}
.person-card-wrapper { width: 85%; margin-inline: auto;}

/* Content: Accordion  */
.content-accordion table { width: 100%;}
.content-accordion table tr { border-bottom: 1px solid rgba(75,75,75,0.2);}
.content-accordion table tr:last-child {border-bottom: none;}
.content-accordion table tr td { padding-block: 10px; padding-right: 20px; vertical-align: baseline;}
.content-accordion table tr td a { text-decoration: none; color: var(--sc-blue); transition: all 300ms;}
.content-accordion table tr td a:hover{color: var(--pc-skyblue);}
.content-accordion .accordion-button::after{filter: grayscale(1) invert(1);}
.content-accordion .accordion-button{ background: var(--pc-skyblue); color: var(--white); font-family: 'Roboto Medium';}
.content-accordion .accordion-button:focus { box-shadow: none;}

/* Login  */
form#user-login-form{padding: 150px;}

.error-wrapper {
    position: relative;
    min-height: 500px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: -95px;
}
.error-wrapper h3 {
    font-family: 'Roboto Bold';
    font-size: 6.5rem;
    text-shadow: 2px 3px #fff;
    color: var(--sc-blue);
}
.error-wrapper p {
    font-size: 1.1rem;
    text-align: center;
}
.error-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    z-index: -1;
    transform: translate(-50%,-55%);
}
.error-wrapper a {
    color: var(--white);
    background: var(--sc-darkCyan);
    padding: 10px 25px;
    text-decoration: none;
    font-family: 'Roboto Medium';
    border-radius: 15px;
}
.floating-wrapper{
    float: right;
    max-width: 500px;
    background: var(--gray);
    padding: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    /* margin-top: 25px; */
}
.story-grid-wrapper a{text-decoration: none; color: var(--black);}
.story-grid-wrapper h6{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

/* Block: Call to Action Button */
/* Base button */
.basic-cta-btn .cta-btn { transition: all 0.5s ease; position: relative; overflow: hidden; font-size: 1.1rem; padding: 1rem 3rem; border-radius: 50px; text-decoration: none; color: var(--pemsea-dark-blue); background: white; display: flex ; justify-content: center; align-items: center; column-gap: 5px; border: 1px solid; }
.basic-cta-btn .cta-btn:hover { transition: all 0.5s ease; background-color: var(--pemsea-dark-blue); color: white;}
.basic-cta-btn .cta-btn::after{ transition: left 0.5s ease; position: relative; left: 0; content: ""; margin-left: 3px; background-image: url("/sites/default/files/2025-05/right-arrow_0.png"); background-size: 20px; display: inline-block; width: 20px; height: 20px;}
.basic-cta-btn .cta-btn:hover::after { background-image: url("/sites/default/files/2025-05/right-arrow-white.png");}
.basic-cta-btn .cta-btn:hover::after{ left: 10px;}

.accordion-paragraph .accordion-button:focus { box-shadow: none;}
.accordion-paragraph .accordion-button { --bs-accordion-btn-icon: url('/sites/default/files/2025-05/down-arrow-icon.png'); --bs-accordion-btn-active-icon: url('/sites/default/files/2025-05/down-arrow-icon.png');}
.accordion-paragraph .accordion-header button { background-color: var(--pemsea-dark-blue); color: white;}
.accordion-paragraph .accordion-body { padding: 20px;}
.accordion-paragraph .accordion-body h4 { color: var(--pemsea-dark-blue); font-weight: 900;}
.accordion-paragraph .accordion-item { --bs-accordion-border-color: none; margin-bottom: 1em; border-radius: var(--bs-accordion-border-radius); overflow: hidden; }

/* Section Spacing */
.section-spacing.download-section { color: white; position: relative; padding: 40px !important; margin: 3rem 80px 0; }
.download-section .section-title { color: white;}
.download-section::before { content: ""; position: absolute; inset: 0; background: var(--pemsea-dark-blue); opacity: 0.7; z-index: -1;}
.download-section img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; aspect-ratio:  1080 / 131;}
.download-section .download-links a { transition: all 0.5s ease; font-size: 1.1rem; padding: 10px 36px; background: var(--pemsea-transparent-dark-blue);  border: 1px solid; color: white; border-radius: 50px; backdrop-filter: blur(1px); text-decoration: none; }
.download-section .download-links a:hover { transition: all 0.5s ease; background-color: var(--white); color: var(--pemsea-dark-blue); transform: translateY(-5px);}
.download-section .download-links a:hover:after { transition: all 0.5s ease; background-image: url("/sites/default/files/2025-06/download-blue.png");} /* position: absolute; inset: 0; width: 100%; background-repeat: no-repeat; background-position: center; background-size: 40px; margin: auto; height: 100%; background-color: white; border-radius: 50px; */
.download-section .download-links a:after { transition: all 0.5s ease; content: ""; background-image: url("/sites/default/files/2025-06/download%20%281%29.png"); margin-left: 5px; background-size: 1.1rem; width: 1.1rem; height: 1.1rem; display: inline-block; vertical-align: middle;}
/* .download-section .download-links a::before { z-index: -2; transition: all 0.5s ease; background-image: url(/sites/default/files/2025-05/download-blue.png); position: absolute; inset: 0; width: 100%; background-repeat: no-repeat; background-position: center; background-size: 40px; margin: auto; height: 100%; background-color: white; border-radius: 50px; }
.download-section .download-links a:hover::before { z-index: 5;} */

/* CSS Changes Story Page */

/* Story Pemsea */
.block-hero-banner-description h2{
    font-weight: 800;
    font-size: 65px;
    text-transform: none;
}
.block-hero-banner-description h5{
    font-weight: 400;
    font-style: italic;
    font-size: 20px;
}

 .block-title-description-wrapper .block-title-description p{
     font-family: 'Roboto Light',Arial,sans-serif;
     font-weight: 500;
    font-size: 16px;
 }

 .story-text-italic{
    font-style: italic;
 }

 /* General styling for the block container */
.block-image-collage {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between rows */
}

/* Single column layout */
.one-col-img {
  display: flex;
  justify-content: center; 
 max-width: 100%;
  padding-left:190px;
  padding-right: 190px;
  object-fit: cover; 
  height: auto;
}

.one-col-img img {
  max-width: 100%;

  height: 700px;

  width: auto;

  object-fit: cover; }
.two-col-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 20px; 
  padding-left:190px;
  padding-right: 190px;
}


.two-col-img img {
  max-width: 100%;
  height: 500px;
  width: auto;
  object-fit: cover;
}

.collage-three-img img {
  max-width: 100%; 
  height: auto;
}

.collage-one-col-img img {
  max-width: 100%;
  padding-left:190px;
  padding-right: 190px;
  object-fit: cover; 
  height: auto;
}

.block-description-w-img-wrapper{
  padding-left: 250px;
  padding-right: 250px;
  background-color: white;
}

.block-title-description h2{
  font-size: 25px;
}

.block-description-w-img-wrapper .block-description-w-img-description p{
  font-size: 25px;
  font-style: italic;
  padding: 10px;
}

.text-content-block .container{
  padding-left: 200px;
  padding-right: 200px;
}

.photo-quote {
  position: relative;
  object-fit: cover;
}

.photo-quote img {
  height: 600px;
  width: 100%;
  position: relative;
  z-index: 1;
   object-fit: cover;
  object-position: 0% 20%;
}

.photo-quote .quotes h2{
  font-size: 65px;
  text-align: left !important;
  margin-top: 60px;
}

.photo-quote .quotes {
  padding: 45px;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  display: flex;
  justify-content: center;
  align-content: center;
}

.block-text-content-overlap {
  height: 158px;
  max-height: 158px;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  margin-top: -163px; 
  margin-bottom: 60px;
  position: relative;  
  z-index: 2;
}

.text-content-block h2 {
    font-size: 28px !important;
    font-family: 'Roboto Bold';
    margin-bottom: 10px !important;
}

.text-content-block p {
    font-size: 1rem;
    margin-bottom: 10px;
  }



.block-text-content-overlap-2 {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    height: 170px;
    max-height: 170px;
    margin-top: -170px;
    position: relative;
    z-index: 2;
    }

    .block-text-content-overlap-2 p{
    margin:0;
    }

.margin-bottom-overlap{
  margin-bottom: 2.5rem;
}

.block-text-content-overlap-2 .text-head {
  padding-left: 250px;
  padding-right: 250px;
  text-align: center;
}

.block-text-content-overlap .text-head {
  padding-left: 250px;
  padding-right: 250px;
  text-align: center;
}

.block .block-description-w-img-wrapper .block-description-w-img-description p{
  font-size: 20px;
}
.block-title-description{ padding-top: 2.5rem; padding-bottom: 2.5rem;}
.story-page .field--name-field-post-date {
    display: none;
}
.story-page .layout.layout--onecol:last-child {
display: none;
}
.block-hero-banner-description {
    z-index: 1 !important;
}