/* Custom styles for SANASA Development Bank Homepage */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* =====================
   CSS Variables
   ===================== */
:root {
  --primary-blue: #003061;
  --primary-black: #050509;
  --primary-yellow: #FCBE48;
  --secondary-gray: #828284;
  --accent-blue: #3AA9E9;
  --text-light: #EAEEFF;
  --light-bg: #F3F5FC;
  --footer-gray: #9F9F9F;
  --footer-light: #D0DBFF;
  --footer-border: #EAEEFF;
  --white: #fff;
  --star-yellow: #FCBE48;
  --about-title: #58585B;
}

/* =====================
   Base Styles
   ===================== */
html{
  overflow-x: hidden;
}   
body {
  font-family: 'DM Sans', Arial, sans-serif;
  overflow-x: hidden;
}

section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

p.text-white{
  font-weight: 300;
}
.width-fc{
  width: fit-content;
}
.pillars-card ul li{
  list-style: disc;
}
ul li{
  margin-bottom: 5px;
}
.object-cover{
  object-fit: cover;
}
/* =====================
   Text & Color Utilities
   ===================== */
.text-dark { color: var(--primary-black) !important; }
.text-primary { color: var(--primary-blue) !important; }
.text-secondary { color: var(--secondary-gray) !important; }
.text-about-title { color: var(--about-title) !important; }
.text-primary-black { color: var(--primary-black) !important; }
.text-accent-blue { color: var(--accent-blue) !important; }
.text-star-yellow { color: var(--star-yellow) !important; }
.text-footer-gray { color: var(--footer-gray) !important; }
.text-footer-light { color: var(--footer-light) !important; }
.text-justify { text-align: justify !important; }
.text-light {color: var(--text-light);}
.text-no-underline{text-decoration: none;}
.border-primary-dark{ border-color: var(--primary-blue) !important;}

/* =====================
   Background Utilities
   ===================== */
.bg-primary { background-color: var(--primary-blue) !important; }
.bg-light-bg { background-color: var(--light-bg) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-accent-blue { background-color: var(--accent-blue) !important; }

/* =====================
   Button Styles
   ===================== */
.btn-primary-dark {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: var(--white);
}
.btn-primary {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-black);
  border-color: var(--primary-black);
}
.btn-dark {
  background-color: var(--primary-black);
  border-color: var(--primary-black);
}
.btn-dark:hover, .btn-dark:focus {
  background-color: var(--accent-blue);
  border-color: var(--accent-blue);
}
.btn-download {
  background: var(--primary-black) !important;
  color: var(--white) !important;
  border-radius: 999px !important;
  font-size: 1.0625rem; /* 17px */
  font-weight: 500;
  padding: 0.5rem 2rem !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: none !important;
  transition: background 0.2s;
}
.btn-download:hover, .btn-download:focus {
  background: var(--accent-blue) !important;
  color: var(--white) !important;
}
.btn-padding { padding: 1.25rem 1.875rem; /* 20px 30px */ }

/* =====================
   Border & Radius Utilities
   ===================== */
.rounded-pill { border-radius: 99px !important; }
.br-10 { border-radius: 10px !important; }
.br-10-top { border-radius: 10px 10px 0 0 !important; }
.br-bottom-10 { border-radius: 0 0 10px 10px !important; }
.border-footer { border-color: var(--footer-border) !important; }
.border-footer-dark { border-color: var(--footer-gray) !important; }

/* =====================
   Font Size Utilities
   ===================== */
.fs-12 { font-size: 1.2rem !important; }
.fs-14 { font-size: 0.875rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-17 { font-size: 1.0625rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-24 { font-size: 1.5rem !important; }
.fs-32 { font-size: 2rem !important; }
.fs-48 { font-size: 3rem !important; }
.fs-56 { font-size: 2.625rem; }
.fs-095 { font-size: 0.95rem !important; }
.fs-125 { font-size: 1.25rem !important; }
@media (min-width: 992px) {
  .fs-56 { font-size: 3.5rem; }
  .fs-48 { font-size: 3rem; }
}

/* =====================
   Font Weight Utilities
   ===================== */
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }

/* =====================
   Letter Spacing & Line Height
   ===================== */
.ls-015em { letter-spacing: 0.15em !important; }
.ls--3 { letter-spacing: -1px !important; }
.ls--2 { letter-spacing: -1px !important; }
.lh-12 { line-height: 1.2 !important; }
.lh-16 { line-height: 1.6 !important; }

/* =====================
   Layout & Spacing Utilities
   ===================== */
.py-16 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-120 { padding-block: 7.5rem; }
.py-90 { padding-block: 5.625rem; }
.pt-90 { padding-top: 5.625rem;}
.min-w-180 { min-width: 180px; }
.h-85 { height: 85% !important; }
.icon-40 { width: 40px !important; height: 40px !important; }
.position-absolute { position: absolute !important; }
.left-10 { left: 10px !important; }
.pad-right-lg-10 { padding-right: 10% !important; }
.pad-right-lg-5 { padding-right: 5% !important; }
.pad-left-lg-5{ padding-left: 5% !important;}
@media (max-width: 991.98px) {
  .pad-right-lg-10, .pad-right-lg-5 { padding-right: 15px !important; }
  .pad-left-lg-5{padding-left: 0 !important;}
}

/* =====================
   Header & Navbar Styles
   ===================== */
header.bg-light-bg {
  background: var(--light-bg);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (max-width: 991.98px) {
  header.bg-light-bg { padding: 1rem; }
}
.navbar {
  padding: 0 !important;
  background: transparent !important;
}
.navbar-brand img {
  display: block;
  height: 43px;
  width: 215px;
}
.navbar-nav {
  gap: 1.5rem !important;
  align-items: flex-start;
}
@media (max-width: 991.98px) {
  .navbar-nav { gap: 1rem !important; }
}
.navbar-nav .nav-link {
  color: var(--secondary-gray) !important;
  font-family: 'DM Sans', Arial, sans-serif;
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  transition: color 0.2s;
  white-space: normal;
  display: flex;
  align-items: baseline;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active {
  color: var(--accent-blue) !important;
  text-decoration: none !important;
}
.navbar-nav .nav-link:hover {
  color: var(--accent-blue) !important;
  text-decoration: none !important;
}
/* .mobile-menu { margin-left: auto; } */

/* =====================
   Hero, Banner, and Card Styles
   ===================== */
.display-hero {
  font-family: 'Adobe Gothic Std', Arial, sans-serif !important;
  font-size: 3.5rem !important;
}
.font-dm-sans { font-family: 'DM Sans', Arial, sans-serif !important; }

.banner-card-1-img {
  position: relative;
  height: 15rem;
}
.banner-card-1-img img {
  width: 20rem;
  height: 15rem;
  right: 0;
}
.banner-card-2 img { object-fit: cover; }

/* =====================
   About Us & Pillars
   ===================== */
.about-images-collage { min-width: 16.25rem; min-height: 21.25rem; }
.about-img-1, .about-img-2, .about-img-3 {
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
.about-img-1 { top: 0; left: 0; width: 8.75rem; z-index: 3; }
.about-img-2 { top: 3.75rem; left: 5rem; width: 7.5rem; z-index: 2; }
.about-img-3 { top: 11.25rem; left: 0; width: 6.875rem; z-index: 1; }

.about-leader-pill {
  min-width: 16.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  background: var(--white);
}
@media (max-width: 767.98px) {
  .about-leader-pill {
    min-width: 11.25rem;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto;
    padding: 0.625rem 0.75rem;
  }
}
.about-rectangle {
  width: 100%;
  height: 11.25rem;
  background: var(--primary-blue);
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.pillars-card { transition: box-shadow 0.2s;min-height: 270px; }
.pillars-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.pillars-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  width: 3.5rem;
  margin: 0 auto;
  background: var(--light-bg);
  border-radius: 50%;
}

/* =====================
   Hero Pill Styles
   ===================== */
.hero-pill {
  border-radius: 10px 999px 999px 10px;
  box-shadow: 0px 20px 90px 0px rgba(0,0,0,0.25);
  position: absolute;
  left: 10px;
  z-index: 2;
}
@media (max-width: 767.98px) {
  .hero-pill { position: relative; left: unset; }
}

/* =====================
   Slider Styles
   ===================== */
.slider { display: flex; gap: 1.5625rem; }
.slider .slick-dots { bottom: -3.125rem; }
.slider .slick-dots li button:before { font-size: 0.75rem; }
.slider .slick-dots li.slick-active button:before { color: var(--accent-blue); }
#product-slider .slick-next{
  right: 0;
}
#product-slider .slick-prev{
  left: 0;
}

/* =====================
   Miscellaneous
   ===================== */
.icon-accent-blue { color: var(--accent-blue) !important; }

.name-pill {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
 
  padding-right: 3rem !important;
}
@media screen and (min-width:992px) {
  .name-pill {
    left: -8%;
  }
}
.border-vertical {
  width: 4px;
  min-height: 50px;
  background-color: var(--accent-blue);
}
.min-h-70{
  min-height: 70px;
}
/* .min-h-400{
  min-height: 400px;
} */
.name-pill-top { top: 5%; }
.name-pill-bottom { bottom: 5%; }

/* Tables */
.bg-primary .table>:not(caption)>*>*{
  color: var(--white);
}

.table tr td,.table tr th{
  background-color: transparent;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #828284;
}
.table thead tr{
  border-top: none;
}
.empty-row td{
  text-indent: -9999px;
}

.table-empty-row{
  height: 40px;
}

.chart-placeholder {
  height: 220px;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.chart-placeholder .chart-bar {
  width: 16%;
  border-radius: 6px 6px 0 0;
}
.chart-years-labels {
  font-size: 13px;
  color: #003061;
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

/* Show dropdown on hover for desktop nav */
@media (min-width: 992px) {
  .navbar-nav .dropdown {
    position: relative;
   
  }
  .navbar-nav .dropdown-menu {
    top: 100% !important; /* Always directly below the parent, regardless of height */
    left: 0;
    margin-top: -2% !important;
    z-index: 1050;
    background: #f7f7fa; 
    min-width: 220px;
    max-width: 300px;
  }
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    pointer-events: auto;
    max-height: 500px;
    overflow-y: auto;
  }
  
}

.navbar-nav .dropdown-menu li a.active, .navbar-nav .dropdown-menu li a:hover, .navbar-nav .dropdown-menu li a:focus{
  color: var(--accent-blue) !important;
}
.navbar-nav .dropdown-menu li{
  margin-bottom: 0;
}
.navbar-nav .dropdown-menu li a{
  white-space: normal;
  padding-block: 5px !important;
}
.dropdown-item.active, .dropdown-item:active{
  background-color: transparent;
}

/* Stakeholder Engagement Page Helpers */
.table-stakeholder thead tr th{
  min-width: 300px;
}

/* Materiality Page Helpers */
.badge-high { color: #FF7E7E !important; font-weight: 700 !important; font-size: 1.25rem !important; }
.badge-medium { color: #FFC37E !important; font-weight: 700 !important; font-size: 1.25rem !important; }
.badge-low { color: #7EBAFF !important; font-weight: 700 !important; font-size: 1.25rem !important; }
.max-w-350 { max-width: 350px !important; }
.bg-light { background: var(--text-light) !important; }
.table-material th, .table-material td { vertical-align: middle; }
.table-material th { background: #D0DBFF !important; color: #003061 !important; }
.table-material thead { border-bottom: 2px solid #003061; }
.table-material { border-color: #D0DBFF !important; }
.table-material .sdg { font-size: 1.1rem; color: #003061; font-weight: 500; }
.table-primary tbody tr td { color: var(--primary-blue);}
.table-primary thead tr th { color: var(--primary-blue);}

/* =====================
   SDG Section Styles (Contribution to SDGs 2024)
   ===================== */
.sdg-table {
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  font-size: 15px;
}
.sdg-table-header {
  color: #fff;
  font-size: 16px;
  background-color: transparent;
  border-bottom: 2px solid #fff;
}
.sdg-table-row {
  background: #0A2A4D;
  color: #fff;
}
.sdg-icon-square {
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0;
  margin-right: 8px;
  color: #fff;
}
.sdg2 { background: #EFA73B; }
.sdg5 { background: #E13A7B; }
.sdg8 { background: #A31C44; }
.sdg13 { background: #419D47; }
.sdg17 { background: #14496B; }
.sdg-number {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}
.sdg-placeholder-icon {
  font-size: 20px;
  display: block;
  margin-top: 2px;
}
.sdg-details-grid h5 {
  color: #fff;
  margin-top: 18px;
  margin-bottom: 6px;
}
.sdg-details-grid ul {
  color: #EAEEFF;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 18px;
}
.sdg-details-grid li {
  margin-bottom: 6px;
}

/* =====================
   SDG Section Utility Classes
   ===================== */
.bg-deep-blue {
  background: #0A2A4D !important;
}
.text-white {
  color: #fff !important;
}
.text-light-blue {
  color: #EAEEFF !important;
}
.border-sdg-row {
  border-bottom: 1px solid #1E4972;
}

/* =====================
   Page-Specific Styles (from commitment-to-sustainability.html)
   ===================== */
.page-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.2;
  color: #003061;
  margin-bottom: 24px;
}

.quote-box {
  background: #003061;
  border-radius: 10px;
  padding: 40px;
  margin-bottom: 50px;
}

.quote-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #EAEEFF;
}

.section-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #003061;
  margin-bottom: 14px;
}

.section-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #828284;
  text-align: justify;
  margin-bottom: 14px;
}

.subsection-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #3AA9E9;
  margin-bottom: 14px;
}

.sdg-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  height: 100%;
}

.sdg-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sdg-icon.food-agriculture {
  background: #D0DBFF;
}
.sdg-icon.gender-equality {
  background: #F3C6E3;
}
.sdg-icon.decent-work {
  background: #FFD6A5;
}
.sdg-icon.climate-action {
  background: #B6E2D3;
}
.sdg-icon.partnerships {
  background: #A5C8FF;
}

.sdg-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: #3AA9E9;
  margin-bottom: 8px;
}

.sdg-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #828284;
  margin-bottom: 0;
}

.sdg-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #3AA9E9;
  color: white;
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.sdg-box {
  background: #003061;
  color: white;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
  height: 100%;
}

.governance-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px 0;
}

.profile-card img{
  height: 460px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.bg-primary .card .card-header{
  border-bottom: 2px solid var(--white);
  padding-left: 0;
}

.compliance-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 2rem;
}

.compliance-table th {
  color: var(--white);
  font-weight: 500;
  padding: 15px 10px;
  text-align: left;
  border: none;
  font-size: 20px;
}

.compliance-table td {
  padding: 15px 10px;
  border-bottom: 1px solid #828284;
  vertical-align: top;
}

.compliance-table .guideline {
  font-weight: 700;
  color: var(--accent-blue);
  /* width: 15%; */
}

.compliance-table .function {
  font-weight: 700;
  color: var(--accent-blue);
  /* width: 35%; */
}

/*
.compliance-table .level {
 width: 20%; 
}

.compliance-table .status {
  width: 20%;
}
*/

.expandable-row {
  cursor: pointer;
}

.expandable-content {
  display: none;
  padding: 20px;
  border-top: 1px solid #dee2e6;
}

.expandable-content.show {
  display: table-row;
}

.expand-icon {
  transition: transform 0.3s ease;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.abbr main .row .col-3{
  padding-right: 0;
}
.abbr main .row .col-9{
  padding-left: 0;
}
.abbr main .bg-white .row .col-3 p, .abbr main .bg-white .row .col-9 p{
  border-bottom: 1px solid #828284;
}

.abbr main .bg-primary .row .col-3 p, .abbr main .bg-primary .row .col-9 p{
  border-bottom: 1px solid #fff;
} 

.border-primary-dark-blue{
  border-color: var(--primary-blue);
  opacity: 1;
}
.opacity-1{
  opacity: 1 !important;
}
.bg-report{
  position: relative;;
}
.bg-report::before{
  content: "";
  background-image: url('./assets/images/report-bg.jpg');
  background-size: cover; /* Adjust as needed */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.2; /* Adjust the opacity (0.0 to 1.0) */
  z-index: 1; /* Puts the pseudo-element behind the content */
}
.bg-report > .container{
  position: relative;
  z-index: 2; /* Ensures content is above the pseudo-element */
}
.bg-msg{
  position: relative;
}
.bg-msg::before{
  content: "";
  background-image: url('./assets/images/msg_bg_02.svg');
  background-position: left top 0px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: -20px;
  width: 120px;
  height: 800px;
  background-size: cover;
  z-index: 0;
}

.bg-msg::after{
  content: "";
  background-image: url('./assets/images/msg_bg_01.svg');
  background-position: right bottom 0px;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  bottom: 200px;
  width: 120px;
  height: 800px;
  background-size: cover;
  z-index: 0;
}

.bg-msg > .container{
  position: relative;
  z-index: 1; /* Ensures content is above the pseudo-element */
}

@media (max-width: 767.98px) {
  .bg-msg::after{
    bottom: 25%;
  }

}