/* About Us section: text, three action buttons, two headshot cards.
   Mobile (under 576px): stacked buttons, icon beside label.
   Tablet (576px+): single column, 2 buttons per row.  Large tablet (992px+): 3 buttons per row.
   Desktop (1200px+): text on the left, headshots on the right.
   Colours come from the dbim-theme tokens. */

.about {
  --about-text-align: left;      /* DBIM checklist: body text is left aligned. Use "justify" to match the screenshot. */
  --about-max: none;             /* maximum width of the content */
  --about-title-size: 1.7rem;
  --about-text-size: 1.5rem;
  --about-btn-size: 1.65rem;
  --about-name-size: 1.5rem;
  --about-role-size: 0.875rem;

  padding-block: 2.5rem;
  background: var(--white);
  color: var(--black);
  font-family: "Noto Sans", sans-serif;
  padding-top: 4.5rem;
  padding-bottom: 6rem;
  margin-left: 1rem;
  margin-right: 1rem;

}

.about-inner {
  width: calc(100% - 3rem);
  max-width: var(--about-max);
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
}

/* Icons: one single-colour SVG, recoloured with the theme's key colour */
.about .ico {
  flex: none;
  display: inline-block;
  width: 3rem;                 /* 24px */
  height: 3rem;
  background-color: var(--key);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.about .ico-org   { width: 3.25rem; height: 3.25rem; margin-right: 1rem; /* 48px */
  -webkit-mask-image: url("../../assets/images/icons/department.svg");   mask-image: url("../../assets/images/icons/department.svg"); }
.about .ico-team  { -webkit-mask-image: url("../../assets/images/icons/team.svg");  mask-image: url("../../assets/images/icons/team.svg"); }
.about .ico-grid  { -webkit-mask-image: url("../../assets/images/icons/org.svg");  mask-image: url("../../assets/images/icons/org.svg"); }
.about .ico-chart { -webkit-mask-image: url("../../assets/images/icons/performance.svg"); mask-image: url("../../assets/images/icons/performance.svg"); }

/* Heading and text */
.about-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: var(--about-title-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--key);
}
.about-text {
  margin: 0 0 2.5rem;
  font-size: var(--about-text-size);
  line-height: 1.65;
  text-align: var(--about-text-align);
}

/* Action buttons */
.about-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.about-actions-serv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.75rem;
  padding: 0.75rem 1rem;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--key);
  border-radius: 0.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-size: var(--about-btn-size);
  font-weight: 550;
  text-align: center;
  text-decoration: none;
}
.about-btn:hover { background: var(--azureish-white-bg); }
.about-btn:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }

/* Headshot cards */
.about-people {
  list-style: none;
  margin: 0 auto;
  /* was "10 auto", which is invalid without a unit */
  padding: 0;
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.about-people li {
  min-width: 0;
}

/* stops long names from stretching the column */

.about-people figure {
  margin: 0;
  text-align: center;
}

.about-people img {
  display: block;
  margin-inline: auto;
  /* this centres the picture */
  width: 70%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  background: var(--white);
  border: 1px solid var(--bright-gray);
  border-bottom: 6px solid var(--key);
}
.about-people figcaption {
  padding-top: 0.75rem;
  text-align: center;
}
.about-people .person-name {
  display: block;
  font-size: var(--about-name-size);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 1rem;
}
.about-people .person-role {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--about-role-size);
  text-transform: uppercase;     /* short label only */
}
@media (min-width: 430px) {
  .about {
    --about-max: 420px;
      --about-title-size: 1.7rem;
      --about-text-size: 1.35rem;
      --about-btn-size: 1.35rem;
    --about-name-size: 1.25rem;
    --about-role-size: 1rem;
  }

  .about-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .about-people img {
    width: 80%;
  }
}

@media (min-width: 576px) {
  .about {
    --about-max: 540px;
    --about-title-size: 1.875rem;
    --about-text-size: 1.5rem;
    --about-btn-size: 1.5rem;
    --about-name-size: 1.5rem;
    --about-role-size: 1.15rem;
  }

  .about-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  

  .about-btn {
    flex-direction: column;
    gap: 0.5rem;
    min-height: 5.5rem;
  }

  .about-people img {
    width: 70%;
  }
}

@media (min-width: 992px) {
  .about {
    --about-max: 720px;
    --about-title-size: 2rem;
    --about-text-size: 1.65rem;
    --about-btn-size: 1.65rem;
    --about-name-size: 1.65rem;
    --about-role-size: 1.2rem;
  }

  .about-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-people img {
    width: 90%;
  }
}

@media (min-width: 1200px) {
  .about {
    --about-max: 1590px;
    --about-text-size: 1.75rem;
    --about-title-size: 2.25rem;
    --about-btn-size: 1.75rem;
    --about-name-size: 1.75rem;
    --about-role-size: 1.25rem;
    padding-top: 4.5rem;
    padding-bottom: 6rem;
  }

.about-inner {
    width: 88%;
    max-width: var(--about-max);
    margin-inline: auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 3rem;
}

.about-inner-sub {
    width: 88%;
    max-width: var(--about-max);
    margin-inline: auto;

    display: grid;
   grid-template-columns: 250px minmax(0, 1fr);
    gap: 3rem;
}
.about-inner-org {
    width: 88%;
    max-width: var(--about-max);
    margin-inline: auto;

    display: grid;
   grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.about-people {
    width: 400px;
    max-width: 300px;
    margin-left: auto;
    margin-right: 0;
    align-self: start;
}

.about-people img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

}

/* =========================================
   ABOUT / INNER PAGE HERO
========================================= */

.hero-sub {
    position: relative;
    width: 100%;
    height: 420px;

    overflow: visible;

    background:
        linear-gradient(
            115deg,
            #075b5b 0%,
            #087878 35%,
            #16a8ad 70%,
            #0d8e94 100%
        );
}


/* Decorative curved shape */

.hero-sub::before {
    content: "";
    position: absolute;

    width: 70%;
    height: 300px;

    top: -80px;
    left: 25%;

    background: rgba(255,255,255,0.06);

    border-radius: 50%;

    transform: rotate(15deg);

    pointer-events: none;
}


/* Second decorative wave */

.hero-sub::after {
    content: "";

    position: absolute;

    width: 65%;
    height: 260px;

    right: -5%;
    top: -70px;

    background: rgba(255,255,255,0.05);

    border-radius: 50%;

    transform: rotate(-18deg);

    pointer-events: none;
}


/* =========================================
   CONTENT
========================================= */

.hero-sub-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding: 5px 50px 0;
}


/* =========================================
   BREADCRUMB
========================================= */

.breadcrumb {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    font-size: 14px;
}

.breadcrumb a {
    color: rgba(255,255,255,0.85);

    text-decoration: none;

    border-bottom: 1px solid
        rgba(255,255,255,0.4);

    padding-bottom: 2px;
}

.breadcrumb a:hover {
    color: #ffffff;

    border-bottom-color: #ffffff;
}

.breadcrumb span {
    color: rgba(255,255,255,0.65);
}


/* =========================================
   TITLE
========================================= */

.hero-sub h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -1px;
}


/* =========================================
   FLOATING NAVIGATION
========================================= */

.hero-sub-nav {
    position: absolute;
    z-index: 20;

    left: 50%;
    bottom: -30px;

    transform: translateX(-50%);

    width: calc(100% - 100px);
    max-width: 1180px;

    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 5px 15px;

    background: #0c6668;

    /* Border */
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 8px;

    /* Shadow */
    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.18),
        0 1px 3px rgba(0, 0, 0, 0.12);

    box-sizing: border-box;
}

.hero-sub-nav a.active {
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    padding: 8px 14px;
    background-color: #0d9c9c;
   
}
/* =========================================
   DOT MENU
========================================= */




/* =========================================
   NAV LINKS
========================================= */

.hero-sub-nav > a {
    position: relative;

    height: 60px;

    display: flex;
    align-items: center;

    padding: 0 22px;

    color: rgba(255,255,255,0.88);

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}


/* Hover */

.hero-sub-nav > a:hover {
    color: #ffffff;

    background: rgba(255,255,255,0.06);
}


/* Active */

.hero-sub-nav > a.active {
    color: #ffffff;
}


/* Active underline */

.hero-sub-nav > a.active::after {
    content: "";

    position: absolute;

    left: 22px;
    right: 22px;

    bottom: 7px;

    height: 3px;

    background: #fbfcfc;

    border-radius: 3px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

    .hero-sub {
        height: 360px;
    }

    .hero-sub-content {
        padding: 55px 30px 0;
    }

    .hero-sub-nav {
        width: calc(100% - 40px);

        overflow-x: auto;

        justify-content: flex-start;
    }

    .hero-sub-nav > a {
        padding: 0 15px;

        font-size: 14px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 600px) {

    .hero-sub {
        height: 300px;
    }

    .hero-sub-content {
        padding: 40px 20px 0;
    }

    .hero-sub h1 {
        font-size: 40px;
    }

    .breadcrumb {
        font-size: 12px;
    }

    .hero-sub-nav {
        width: calc(100% - 24px);

        bottom: -25px;

        min-height: 55px;

        padding: 0 8px;
    }

    .nav-dots {
        width: 42px;
    }

    .hero-sub-nav > a {
        height: 55px;

        padding: 0 12px;

        font-size: 13px;
    }

}
/* =========================================================
   ABOUT CONTENT
   ========================================================= */

.about {
    width: 100%;

    padding: 65px 0 70px;

    box-sizing: border-box;
}


.about-inner-sub {
    width: 84%;

    max-width: 1250px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 290px minmax(0, 1fr);

    gap: 25px;

    align-items: start;
}



.about-inner-org {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;

    position: relative;
}


.about-org {
    position: relative;

    background: #f2f1f1;

    border: 1px solid #e1e1e1;
    border-radius: 12px;

    padding: 28px;

    min-height: 400px;

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   LEFT VISION BOX
   ========================================================= */

.about-vision {
    background: #eeeeee;

    border-radius: 8px;

    padding: 25px 22px;

    min-height: 220px;

    box-sizing: border-box;
}

.org-overlay {
    position: absolute;

    z-index: 100;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 20px;

    box-sizing: border-box;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.25);
}




.about-vision h2 {
    margin: 0 0 14px;

    color: #145c5c;

    font-size: 20px;

    line-height: 1.45;

    font-weight: 600;
}


.about-vision span {
    display: block;

    color: #333333;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 600;

    letter-spacing: 0.5px;
}



/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.about-main-sub {
    min-width: 0;
}


.about-main-sub p {
    margin: 0 0 14px;

    color: #333333;

    font-size: 14px;

    line-height: 1.55;
}


.about-text-sub {
    margin-top: 0 !important;
}


/* =========================================================
   STRUCTURE HEADING
   ========================================================= */

.structure-title {
    margin: 12px 0 5px;

    color: #176060;

    font-size: 22px;

    line-height: 1.3;

    font-weight: 600;
}


.structure-intro {
    margin-bottom: 18px !important;
}



/* =========================================================
   SECTION CARDS
   ========================================================= */

.about-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

    margin-top: 20px;
}
.about-actions-min {
    display: block;

    

    margin-top: 20px;
}

.about-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;

    margin-top: 20px;
}


.section-card {
    min-height: 180px;

    padding: 20px;

    box-sizing: border-box;

    background: #a8dcdf;

    border-radius: 8px;
}

.section-card-serv {
    min-height: 70px;

    padding: 15px;

    box-sizing: border-box;

    background: #fffefe;
    border: 1px solid #006568;

    border-radius: 8px;
}



.section-heading {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}


.section-number {
    color: #075b5d;

    font-size: 28px;

    line-height: 1;

    font-weight: 700;
}
.section-number-serv {
    color: #075b5d;

    font-size: 24px;

    line-height: 1;

    font-weight: 700;
}


.section-heading h3 {
    margin: 0;

    color: #164f50;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 600;
}


.section-card p {
    margin: 0;

    color: #173f40;

    font-size: 13px;

    line-height: 1.55;
}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hero-sub {
        width: 100%;

        height: 220px;
    }


    .hero-sub-content {
        margin-left: 4%;

        padding-top: 65px;
    }


    .hero-sub-nav {
        left: 3%;

        right: 3%;

        gap: 20px;

        overflow-x: auto;

        padding: 0 18px;
    }


    .hero-sub-nav a {
        font-size: 13px;
    }


    .about-inner-sub {
        width: 90%;

        grid-template-columns:
            240px minmax(0, 1fr);

        gap: 20px;
    }

    .about-inner-org {
        width: 90%;

        grid-template-columns:
            1fr 1fr;

        gap: 20px;
    }


    .about-vision h2 {
        font-size: 18px;
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .hero-sub {
        height: 210px;

        margin-top: 0;
    }


    .hero-sub-content {
        padding-top: 55px;

        margin-left: 6%;
    }


    .hero-sub-content h1 {
        font-size: 32px;
    }


    .hero-sub .breadcrumb {
        font-size: 13px;
    }


    .hero-sub-nav {
        left: 4%;

        right: 4%;

        bottom: -25px;

        min-height: 50px;

        gap: 22px;

        padding: 0 16px;

        overflow-x: auto;

        scrollbar-width: thin;
    }


    .hero-sub-nav a {
        font-size: 12px;
    }


    .nav-dots {
        display: none;
    }


    .about {
        padding-top: 55px;
    }


    .about-inner-sub {
        width: 90%;

        display: block;
    }


    .about-vision {
        margin-bottom: 25px;

        min-height: auto;
    }


    .about-vision h2 {
        font-size: 19px;
    }


    .about-main-sub p {
        font-size: 14px;
    }


    .about-actions {
        grid-template-columns: 1fr;

        gap: 15px;
    }

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 450px) {

    .hero-sub {
        height: 190px;
    }


    .hero-sub-content {
        padding-top: 48px;
    }


    .hero-sub-content h1 {
        font-size: 28px;
    }


    .hero-sub-nav {
        gap: 18px;
    }


    .hero-sub-nav a {
        font-size: 11px;
    }


    .about {
        padding-top: 50px;
    }


    .about-inner-sub {
        width: 92%;
    }


    .about-vision {
        padding: 20px;
    }


    .section-card {
        padding: 18px;
    }

}
.about-org {
    position: relative;

    display: flex;
    flex-direction: column;

    background: #f2f1f1;

    border: 1px solid #e1e1e1;
    border-radius: 12px;

    padding: 28px 28px 25px;

    min-height: 360px;

    box-sizing: border-box;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* Hover */

.about-org:hover {
    transform: translateY(-4px);

    border-color: #0c6668;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.10);
}


/* =========================================
   CARD HEADER
   ========================================= */

.org-card-header {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;

    padding-bottom: 15px;

    border-bottom: 1px solid #d8d8d8;
}


/* Number */

.org-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    background: #0c6668;
    color: #ffffff;

    border-radius: 50%;

    font-size: 13px;
    font-weight: 700;
}


/* Heading */

.org-card-header h2 {
    margin: 0;

    color: #174f50;

    font-size: 23px;
    font-weight: 700;

    line-height: 1.25;
}


/* =========================================
   CONTENT
   ========================================= */

.org-content {
    flex: 1;
}

.org-content p {
    margin: 0;

    color: #444444;

    font-size: 15px;
    line-height: 1.7;
}

.org-content strong {
    color: #174f50;
    font-weight: 700;
}


/* =========================================
   ARROW BUTTON
   ========================================= */

.about-org .green {
    align-self: flex-end;

    width: 44px;
    height: 44px;

    margin-top: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 10px;
    background: #0c6668;
    color: #ffffff;

    font-size: 23px;
    font-weight: 400;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.about-org .green:hover {
    background: #084e50;

    transform: translateX(4px);
}


/* =========================================
   HIDDEN IMAGE
   ========================================= */

.about-org img.hide {
    display: none;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 800px) {

    .about-org-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-org {
        min-height: auto;
        padding: 24px 22px;
    }

    .org-card-header h2 {
        font-size: 20px;
    }

    .org-content p {
        font-size: 14px;
    }
}



/* Main content */
.officer-directory {
    width: 93%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 15px 10px;
    box-sizing: border-box;
    background: #fff;
    color: #111;
    font-family: normal;
}

/* Search box */
.officer-search {
    width: 300px;
    max-width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 0 16px;
    margin: 0 0 36px 7px;
    border: 3px solid #075e5d;
    background: #fff;
}

.officer-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 23px;
    font-family: inherit;
}

/* Alphabet bar */
.alphabet-filter {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 3px;
    min-height: 64px;
    padding: 5px 8px;
    margin: 0 0 35px;
    border-radius: 6px;
    background: #eeecec;
}

.alphabet-btn {
    min-width: 30px;
    min-height: 40px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #075e70;
    font-family: inherit;
    font-size: 21px;
    cursor: pointer;
}

/* Officer row */
.officer-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr)
                           minmax(0, .95fr)
                           minmax(0, .72fr);
    column-gap: 24px;
    align-items: start;
    padding: 35px 30px 28px 30px;
    border-bottom: 1px solid #c9c9c9;
}

/* Designation */
.officer-designation {
    margin: 0 0 5px;
    color: #075e5d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

/* Officer name */
.officer-details h2 {
    margin: 0 0 10px;
    color: #111;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
}

/* Role label */
.officer-role {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 7px 17px;
    border-radius: 20px;
    background: #a6dada;
    color: #07545c;
    font-size: 14px;
    line-height: 1.5;
}

/* Phone and email */
.officer-contact {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.contact-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Icons */
.contact-item svg,
.officer-address > svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: #006568;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Address */
.officer-address {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.officer-address address {
    margin: 0;
    font-size: 18px;
    font-style: normal;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 1000px) {
    .officer-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 22px;
        padding: 28px 20px;
    }

    .officer-address {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .officer-directory {
        width: 100%;
        padding: 12px;
    }

    .officer-search {
        width: 100%;
        height: 52px;
        margin: 0 0 24px;
    }

    .officer-search input {
        font-size: 18px;
    }

    .alphabet-filter {
        justify-content: flex-start;
        gap: 3px;
    }

    .alphabet-btn {
        font-size: 17px;
    }

    .officer-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 24px 8px;
    }

    .officer-address {
        grid-column: auto;
    }

    .officer-details h2 {
        font-size: 22px;
    }

    .officer-role {
        font-size: 15px;
    }

    .contact-item,
    .officer-address address {
        font-size: 17px;
    }
}