/* SDG */
.bg-sdg_1 {
  background-color: #eb1c2e !important;
  color: #ffffff; /* white */
}
.bg-sdg_1 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_1 a:hover {
  opacity: 0.8;
}

.bg-sdg_2 {
  background-color: #d19e29 !important;
  color: #ffffff; /* white */
}
.bg-sdg_2 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_2 a:hover {
  opacity: 0.8;
}

.bg-sdg_3 {
  background-color: #2c9946 !important;
  color: #ffffff; /* white */
}
.bg-sdg_3 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_3 a:hover {
  opacity: 0.8;
}

.bg-sdg_4 {
  background-color: #c32033 !important;
  color: #ffffff; /* white */
}
.bg-sdg_4 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_4 a:hover {
  opacity: 0.8;
}

.bg-sdg_5 {
  background-color: #ef402b !important;
  color: #ffffff; /* white */
}
.bg-sdg_5 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_5 a:hover {
  opacity: 0.8;
}

.bg-sdg_6 {
  background-color: #01acd8 !important;
  color: #ffffff; /* white */
}
.bg-sdg_6 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_6 a:hover {
  opacity: 0.8;
}

.bg-sdg_7 {
  background-color: #fcb714 !important;
  color: #ffffff; /* white */
}
.bg-sdg_7 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_7 a:hover {
  opacity: 0.8;
}

.bg-sdg_8 {
  background-color: #8f1838 !important;
  color: #ffffff; /* white */
}
.bg-sdg_8 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_8 a:hover {
  opacity: 0.8;
}

.bg-sdg_9 {
  background-color: #f26e24 !important;
  color: #ffffff; /* white */
}
.bg-sdg_9 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_9 a:hover {
  opacity: 0.8;
}

.bg-sdg_10 {
  background-color: #df1a83 !important;
  color: #ffffff; /* white */
}
.bg-sdg_10 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_10 a:hover {
  opacity: 0.8;
}

.bg-sdg_11 {
  background-color: #f99c25 !important;
  color: #ffffff; /* white */
}
.bg-sdg_11 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_11 a:hover {
  opacity: 0.8;
}

.bg-sdg_12 {
  background-color: #c98a2b !important;
  color: #ffffff; /* white */
}
.bg-sdg_12 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_12 a:hover {
  opacity: 0.8;
}

.bg-sdg_13 {
  background-color: #47773b !important;
  color: #ffffff; /* white */
}
.bg-sdg_13 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_13 a:hover {
  opacity: 0.8;
}

.bg-sdg_14 {
  background-color: #017dbb !important;
  color: #ffffff; /* white */
}
.bg-sdg_14 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_14 a:hover {
  opacity: 0.8;
}

.bg-sdg_15 {
  background-color: #3eb049 !important;
  color: #ffffff; /* white */
}
.bg-sdg_15 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_15 a:hover {
  opacity: 0.8;
}

.bg-sdg_16 {
  background-color: #005689 !important;
  color: #ffffff; /* white */
}
.bg-sdg_16 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_16 a:hover {
  opacity: 0.8;
}

.bg-sdg_17 {
  background-color: #1f3668 !important;
  color: #ffffff; /* white */
}
.bg-sdg_17 a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
}
.bg-sdg_17 a:hover {
  opacity: 0.8;
}

.ratio img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

.ratio-3x2 {
  --bs-aspect-ratio: 66.6%;
}

.btn {
  /* SDG color */
}
.btn.btn-primary, .btn.btn-backend.btn-primary {
  background-color: #5792C9;
  border-color: #5792C9;
}
.btn.btn-primary:hover, .btn.btn-backend.btn-primary:hover {
  background-color: rgb(67.7027027027, 133.4797297297, 194.7972972973);
}
.btn.btn-secondary, .btn.btn-backend.btn-secondary {
  background-color: #15A5AB;
  border-color: #15A5AB;
}
.btn.btn-secondary:hover, .btn.btn-backend.btn-secondary:hover {
  background-color: rgb(18.2109375, 143.0859375, 148.2890625);
}
.btn.btn-outline, .btn.btn-backend.btn-outline {
  background-color: #fff;
  border-color: #5792C9;
}
.btn.btn-outline:hover, .btn.btn-backend.btn-outline:hover {
  background-color: rgb(242.25, 242.25, 242.25);
}
.btn.btn-white, .btn.btn-backend.btn-white {
  background-color: #fff;
  border-color: none;
  box-shadow: 0px 0px 6px 2px #ebebeb;
}
.btn.btn-white:hover, .btn.btn-backend.btn-white:hover {
  background-color: rgb(242.25, 242.25, 242.25);
}
.btn.btn-orange, .btn.btn-backend.btn-orange {
  background-color: #F49E14;
  border-color: #F49E14;
}
.btn.btn-orange:hover, .btn.btn-backend.btn-orange:hover {
  background-color: rgb(227.8353658537, 144.4573170732, 10.6646341463);
}
.btn.btn-darkgray, .btn.btn-backend.btn-darkgray {
  background-color: #454545;
  border-color: #454545;
}
.btn.btn-darkgray:hover, .btn.btn-backend.btn-darkgray:hover {
  background-color: rgb(56.25, 56.25, 56.25);
}
.btn.btn-lightgray, .btn.btn-backend.btn-lightgray {
  background-color: #F2F2F2;
  border-color: #F2F2F2;
}
.btn.btn-lightgray:hover, .btn.btn-backend.btn-lightgray:hover {
  background-color: rgb(229.25, 229.25, 229.25);
}
.btn.btn-noborder {
  background-color: rgba(28, 28, 28, 0.06);
  border: none;
}
.btn.btn-noborder:hover {
  background-color: rgba(28, 28, 28, 0.15);
}
.btn.btn-sdg_1, .btn.btn-backend.btn-sdg_1 {
  background-color: #eb1c2e;
  border-color: #eb1c2e;
}
.btn.btn-sdg_1:hover, .btn.btn-backend.btn-sdg_1:hover {
  background-color: rgb(218.2692307692, 19.2307692308, 36.5384615385);
}
.btn.btn-sdg_2, .btn.btn-backend.btn-sdg_2 {
  background-color: #d19e29;
  border-color: #d19e29;
}
.btn.btn-sdg_2:hover, .btn.btn-backend.btn-sdg_2:hover {
  background-color: rgb(187.682, 141.884, 36.818);
}
.btn.btn-sdg_3, .btn.btn-backend.btn-sdg_3 {
  background-color: #2c9946;
  border-color: #2c9946;
}
.btn.btn-sdg_3:hover, .btn.btn-backend.btn-sdg_3:hover {
  background-color: rgb(38.3045685279, 133.1954314721, 60.9390862944);
}
.btn.btn-sdg_4, .btn.btn-backend.btn-sdg_4 {
  background-color: #c32033;
  border-color: #c32033;
}
.btn.btn-sdg_4:hover, .btn.btn-backend.btn-sdg_4:hover {
  background-color: rgb(173.0947136564, 28.4052863436, 45.2709251101);
}
.btn.btn-sdg_5, .btn.btn-backend.btn-sdg_5 {
  background-color: #ef402b;
  border-color: #ef402b;
}
.btn.btn-sdg_5:hover, .btn.btn-backend.btn-sdg_5:hover {
  background-color: rgb(237.2105263158, 42.6381578947, 19.2894736842);
}
.btn.btn-sdg_6, .btn.btn-backend.btn-sdg_6 {
  background-color: #01acd8;
  border-color: #01acd8;
}
.btn.btn-sdg_6:hover, .btn.btn-backend.btn-sdg_6:hover {
  background-color: rgb(0.8824884793, 151.7880184332, 190.6175115207);
}
.btn.btn-sdg_7, .btn.btn-backend.btn-sdg_7 {
  background-color: #fcb714;
  border-color: #fcb714;
}
.btn.btn-sdg_7:hover, .btn.btn-backend.btn-sdg_7:hover {
  background-color: rgb(243.3928571429, 171.9285714286, 3.1071428571);
}
.btn.btn-sdg_8, .btn.btn-backend.btn-sdg_8 {
  background-color: #8f1838;
  border-color: #8f1838;
}
.btn.btn-sdg_8:hover, .btn.btn-backend.btn-sdg_8:hover {
  background-color: rgb(121.1646706587, 20.3353293413, 47.4491017964);
}
.btn.btn-sdg_9, .btn.btn-backend.btn-sdg_9 {
  background-color: #f26e24;
  border-color: #f26e24;
}
.btn.btn-sdg_9:hover, .btn.btn-backend.btn-sdg_9:hover {
  background-color: rgb(238.3512931034, 94.6875, 14.1487068966);
}
.btn.btn-sdg_10, .btn.btn-backend.btn-sdg_10 {
  background-color: #df1a83;
  border-color: #df1a83;
}
.btn.btn-sdg_10:hover, .btn.btn-backend.btn-sdg_10:hover {
  background-color: rgb(200.1626506024, 23.3373493976, 117.5843373494);
}
.btn.btn-sdg_11, .btn.btn-backend.btn-sdg_11 {
  background-color: #f99c25;
  border-color: #f99c25;
}
.btn.btn-sdg_11:hover, .btn.btn-backend.btn-sdg_11:hover {
  background-color: rgb(248.3169642857, 144.7299107143, 12.1830357143);
}
.btn.btn-sdg_12, .btn.btn-backend.btn-sdg_12 {
  background-color: #c98a2b;
  border-color: #c98a2b;
}
.btn.btn-sdg_12:hover, .btn.btn-backend.btn-sdg_12:hover {
  background-color: rgb(179.993852459, 123.5778688525, 38.506147541);
}
.btn.btn-sdg_13, .btn.btn-backend.btn-sdg_13 {
  background-color: #47773b;
  border-color: #47773b;
}
.btn.btn-sdg_13:hover, .btn.btn-backend.btn-sdg_13:hover {
  background-color: rgb(60.8286516854, 101.952247191, 50.547752809);
}
.btn.btn-sdg_14, .btn.btn-backend.btn-sdg_14 {
  background-color: #017dbb;
  border-color: #017dbb;
}
.btn.btn-sdg_14:hover, .btn.btn-backend.btn-sdg_14:hover {
  background-color: rgb(0.8643617021, 108.045212766, 161.6356382979);
}
.btn.btn-sdg_15, .btn.btn-backend.btn-sdg_15 {
  background-color: #3eb049;
  border-color: #3eb049;
}
.btn.btn-sdg_15:hover, .btn.btn-backend.btn-sdg_15:hover {
  background-color: rgb(55.3571428571, 157.1428571429, 65.1785714286);
}
.btn.btn-sdg_16, .btn.btn-backend.btn-sdg_16 {
  background-color: #005689;
  border-color: #005689;
}
.btn.btn-sdg_16:hover, .btn.btn-backend.btn-sdg_16:hover {
  background-color: rgb(0, 69.9927007299, 111.5);
}
.btn.btn-sdg_17, .btn.btn-backend.btn-sdg_17 {
  background-color: #1f3668;
  border-color: #1f3668;
}
.btn.btn-sdg_17:hover, .btn.btn-backend.btn-sdg_17:hover {
  background-color: rgb(25.1444444444, 43.8, 84.3555555556);
}
.btn.btn-icon {
  display: flex;
  align-items: center;
  width: fit-content;
}
.btn.btn-icon i.bi {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  line-height: 1rem;
  position: relative;
  top: -2px;
}
.btn._btn-large {
  padding: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}

._list {
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  ._list {
    display: flex;
  }
}
._list._list-default ._list--img {
  padding-right: 0;
  padding-bottom: 0.5rem;
}
@media (min-width: 768px) {
  ._list._list-default ._list--img {
    padding-right: 1.5rem;
    padding-bottom: 0;
  }
}
._list ._list--date {
  font-size: 0.825rem;
  font-weight: normal;
  margin-bottom: 0.25rem;
  color: #5d5d5d;
  text-transform: initial;
}

.swiper-container {
  position: relative;
  overflow: hidden;
}
.swiper-button {
  background: #fff;
  border: 1px solid;
  padding: 0.5rem;
  border-radius: 50%;
}
.swiper-button:hover svg path {
  fill: #000000;
}
.swiper-cards .swiper-slide {
  max-width: 375px;
}

.hero-banner {
  position: relative;
  margin-bottom: 2rem;
}
.hero-banner .hero-banner-video,
.hero-banner .hero-banner-img {
  width: 100%;
}
.hero-banner video {
  object-fit: cover !important;
}
.hero-banner .hero-caption {
  position: absolute;
  bottom: 1rem;
  width: 94%;
  z-index: 1;
  background: rgba(41, 82, 121, 0.8392156863);
  color: #fff;
  padding: 1rem;
  left: 3%;
}
@media (min-width: 768px) {
  .hero-banner .hero-caption {
    bottom: 1.5rem;
  }
}
.hero-banner .hero-caption .title-category {
  text-transform: uppercase;
  font-size: 0.8rem;
  opacity: 0.75;
  margin-bottom: 0.25rem;
}
.hero-banner .hero-caption .title-category, .hero-banner .hero-caption .hero-text {
  display: none;
}
@media (min-width: 768px) {
  .hero-banner .hero-caption .title-category, .hero-banner .hero-caption .hero-text {
    display: block;
  }
}
.hero-banner .hero-caption .hero-date {
  font-size: 0.825rem;
  opacity: 0.75;
  margin-bottom: 0.25rem;
  font-weight: normal;
}

.card._card-default {
  padding: 2rem 2rem;
}
.card._card-default .card-body {
  padding: 1.5rem 0 0;
}
.card._card-media-top .card-body {
  padding: 1rem;
}
@media (min-width: 768px) {
  .card._card-media-top .card-body {
    padding: 1.5rem;
  }
}
.card._card-media-full {
  overflow: hidden;
}
.card._card-media-full .card-img-overlay {
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
}
.card._card-media-full .card-img-overlay ._category a {
  color: white;
}
.card._card-media-full .card-img-overlay .card-body {
  background: rgba(0, 0, 0, 0.5);
  margin: auto -2.5rem -2rem;
  padding: 1.5rem 2rem;
  flex: none;
}
.card._card-media-full .card-img-overlay .card-body a {
  color: white;
}
.card._card-media-full .card-btn a {
  color: #fff;
}
.card-category {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #adadad;
}
.card-date {
  font-size: 0.825rem;
  font-weight: normal;
  margin-bottom: 0.5rem;
  color: #5d5d5d;
}