#about-us {
    padding: 4rem 0;
}

    #about-us .v6_278 {
        width: 100%;
        height: 240px;
        background: url(../../Images/aboutus/v6_278.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }

#mission-vision {
    padding: 4rem 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    background-image: url(../../Images/aboutus/v6_247.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: hue;
    color: #fff;
}

    #mission-vision .li-header {
        font-weight: 600;
    }

#corporate-profile {
    padding: 4rem 0;
}
    
    #corporate-profile .li-header {
        font-weight: 600;
    }


.big-letter {
    font-weight: 700 !important;
    font-size: 26px;
    display: inline-block;
    margin-right: 2px;
}


/* -------------------------------------------- */
/* BOARD OF DIRECTORS */
/* -------------------------------------------- */

#board-directors {
    padding: 4rem 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    background-image: url(../../Images/aboutus/v294_86.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: hue;
    color: #fff;
}

/* === Common Styles === */
#board-directors .bod-image {
    max-width: 100px !important;
    margin-bottom: 0.6rem;
}

#board-directors .bod-name {
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0.1rem;
    white-space: nowrap; /* prevents line break */
}

#board-directors .bod-title {
    color: #fff !important;
    font-size: 12px;
    text-align: center;
    margin-bottom: 0;
    font-style: italic; /* italicized title only */
}

/* === Board Layout: 3 top + 5 bottom === */
.row-board-directors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

.row-board-directors > [class*="col-"] {
  flex: 0 0 14%;
  max-width: 14%;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Force a new row after the 3rd director */
.row-board-directors > [class*="col-"]:nth-child(3)::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  height: 0;
}

/* Adjust spacing between rows */
.row-board-directors > [class*="col-"]:nth-child(4) {
  margin-top: 10px;
}

/* === Responsive Layouts === */
#board-directors .row-board-directors {
  display: flex;
  flex-direction: column; /* stack top and bottom rows vertically */
  align-items: center;
}

#board-directors .row-board-directors .directors-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center on desktop */
  gap: 2rem;
  width: 100%;
  margin-bottom: 2rem;
}

#board-directors .director-card {
  text-align: center;
  flex: 0 0 16%;     /* roughly 8 per row max */
  min-width: 180px;  /* prevents shrinking too small */
}

/* Medium screens (4 per row) */
@media (max-width: 1200px) {
  #board-directors .director-card {
    flex: 0 0 25%;
  }
}

/* Tablets (3 per row) */
@media (max-width: 992px) {
  #board-directors .director-card {
    flex: 0 0 33.333%;
  }
}

/* Small tablets (2 per row) */
@media (max-width: 768px) {
  #board-directors .director-card {
    flex: 0 0 50%;
  }
}

/* Phones (1 per row) */
@media (max-width: 576px) {
  #board-directors .director-card {
    flex: 0 0 100%;
  }

  #board-directors .bod-image {
    max-width: 80px;
  }

  #board-directors .bod-name {
    font-size: 13px;
  }

  #board-directors .bod-title {
    font-size: 11px;
    font-style: italic; /* keep italic for mobile too */
  }
}




/* -------------------------------------------- */
/* MANAGEMENT TEAM (Committee + Resource Persons) */
/* -------------------------------------------- */

#management-team {
    padding: 4rem 0;
    width: 100%;
    height: 100%;
    background: rgba(250,247,247,0.9);
    background-image: url(../../Images/aboutus/sec-bg-management-team.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: hue;
    color: #000; /* black text on light background */
}

/* === Common Styles (consistent with Board layout) === */
#management-team .bod-image {
    max-width: 100px !important;  /* match board director size */
    margin-bottom: 0.6rem;
    border-radius: 4px;
}

#management-team .bod-name {
    color: #000 !important;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0.1rem;
    white-space: nowrap;
}

#management-team .bod-title {
    color: #000 !important;
    font-size: 12px;
    text-align: center;
    margin-bottom: 0;
    font-style: italic; /* italicize only the title */
}

/* === Desktop Layout (centered, 4 per row) === */
@media (min-width: 769px) {
    #management-team .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* center horizontally */
        align-items: flex-start;
        gap: 2rem; /* spacing between cards */
        text-align: center;
    }

    /* 4 per row evenly spaced */
    #management-team .col-sm-12.col-md-3 {
        flex: 0 0 22%;
        max-width: 22%;
        display: flex;
        justify-content: center;
    }

    #management-team .bod-image {
        max-width: 100px !important;
    }
}

/* === Mobile Layout (centered) === */
@media (max-width: 768px) {
    #management-team .row {
        justify-content: center !important;
        text-align: center !important;
        padding-left: 0;
    }

    #management-team .col-sm-12 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center !important;
        margin-bottom: 1.2rem;
    }

    #management-team .bod-image {
        max-width: 80px !important;
        margin: 0 auto 0.5rem auto;
    }

    #management-team .bod-name {
        font-size: 13px;
        color: #000 !important;
    }

    #management-team .bod-title {
        font-size: 11px;
        color: #000 !important;
        font-style: italic; /* keep italic on mobile too */
    }
}



/* -------------------------------------------- */
/* CORPORATE SECRETARIES (final refined version) */
/* -------------------------------------------- */

.row-corp-secretaries {
    justify-content: center !important;
    text-align: center !important;
}

/* Default desktop style */
.row-corp-secretaries .col-sm-12 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    margin-bottom: 1rem;
}

/* Image smaller on desktop */
.row-corp-secretaries .bod-image {
    max-width: 75px !important;
    margin-bottom: 0.4rem;
    border-radius: 4px;
}

/* Text slightly smaller for balance */
.row-corp-secretaries .bod-name {
    font-weight: 600;
    color: #000 !important;
    font-size: 12px;
    text-align: center;
    margin-bottom: 0.1rem;
}

.row-corp-secretaries .bod-title {
    color: #000 !important;
    font-size: 10px;
    text-align: center;
    margin-bottom: 0;
}

/* Mobile view (same structure, a bit smaller) */
@media (max-width: 768px) {
    .row-corp-secretaries .col-sm-12 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        margin-bottom: 1rem;
    }

    .row-corp-secretaries .bod-image {
        max-width: 65px !important;
        margin-bottom: 0.3rem;
    }

    .row-corp-secretaries .bod-name {
        font-size: 11px;
    }

    .row-corp-secretaries .bod-title {
        font-size: 9px;
    }
}

#corporate-secretary .row-corp-secretaries .bod-image {
    max-width: 70px !important;
    margin-bottom: 0.4rem;
    border-radius: 4px;
}

@media (max-width: 768px) {
    #corporate-secretary .row-corp-secretaries .bod-image {
        max-width: 60px !important;
    }
}


#corporate-secretary .bod-name {
    font-size: 12px !important;
    font-weight: 600;
}
#corporate-secretary .bod-title {
    font-size: 10px !important;
}

/* === REFINED CORPORATE SECRETARY STYLE (80% smaller, white text) === */
#corporate-secretary .bod-image,
#board-directors .row-corp-secretaries .bod-image {
    max-width: 80px !important;   /* 80% of directors' 100px */
    margin-bottom: 0.4rem !important;
    border-radius: 4px;
}

#corporate-secretary .bod-name,
#board-directors .row-corp-secretaries .bod-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #fff !important;  /* white like directors */
    margin-bottom: 0.1rem !important;
}

#corporate-secretary .bod-title,
#board-directors .row-corp-secretaries .bod-title {
    font-size: 11px !important;
    text-align: center !important;
    color: #fff !important;  /* white text */
    margin-bottom: 0 !important;
}

/* Mobile view adjustments */
@media (max-width: 768px) {
    #corporate-secretary .bod-image,
    #board-directors .row-corp-secretaries .bod-image {
        max-width: 65px !important; /* slightly smaller on mobile */
    }

    #corporate-secretary .bod-name,
    #board-directors .row-corp-secretaries .bod-name {
        font-size: 12px !important;
    }

    #corporate-secretary .bod-title,
    #board-directors .row-corp-secretaries .bod-title {
        font-size: 10px !important;
    }
}

.row-corp-secretaries {
    margin-top: -80px; /* Adjust closer or farther if needed */
}

/* Shift Emelyn Bonayon slightly to the left */
.row-corp-secretaries {
    display: flex;
    justify-content: center; /* keeps layout responsive */
}

.row-corp-secretaries > div {
    margin-right: 350px; /* adjust this number left/right */
}


-----------------------------------------

/* ======================================================
   BOARD OF DIRECTORS & CORPORATE SECRETARY STYLING
   ====================================================== */

.directors-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 30px;
}

.director-card {
    width: 140px;
}

.bod-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-bottom: 8px;
}

.bod-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bod-title {
    font-size: 12px;
    color: #555;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Corporate Secretary section */
.corpsec-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-right: 350px; /* your preferred offset */
}

/* Responsive fix for smaller devices */
@media (max-width: 767px) {
    .corpsec-wrapper {
        justify-content: center;
        margin-right: 0;
    }
    .director-card {
        width: 120px;
    }
}