@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --brand-blue: #2B73E5;
    --background-light-gray: #EDEDED;
    --dark-blue: #1D385B;
    --medium-gray: #898888;
    --light-gray: #C9C9C9;
    --white: #ffffff;
    --center-width: 100vw;
    --center-padding: 14px;
}

h1 {
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

h2 {
    margin-top: 50px;
    color: #1D385B;
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
}

h3,
h3.panel-title {
    color: #2a72e4;
    font-size: 24px;
    line-height: 34px;
}

h4 {
    color: var(--dark-blue);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    margin: 0;
}

p,
.body {
    font-size: 15px;
    line-height: 24px;
}

/* Body and Wrapper Styles */

body {
    font-family: Helvetica;
    background: white;
}

main {
    border: 0 none;
}

#siteWrapper {
    background-color: white !important;
}


//*Font Styles*/
/* Disable pointer events for top-level dropdown links only */
#main-header .nav-main .top-level.dropdown>a {
    pointer-events: none;
    /* Disable clicking */
}

/* Ensure non-dropdown links like "Home" remain clickable */
#main-header .nav-main .top-level:not(.dropdown)>a {
    pointer-events: auto;
    /* Ensure clickable */
}

.skin-header {
    min-height: auto !important;
}

/* Adjust Logo Styling */
.dma-full-width .skin-logo img {
    max-height: 44px !important;
    height: 44px;
}

.header-inset .skin-header-left {
    margin-left: 20px !important;
}

/* Main Header Styling */
.dma-full-width #main-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1001 !important;
    background-color: var(--background-light-gray) !important;
}

/* Full Header Background */
.dma-full-width #main-header .skin-header-background {
    background-color: var(--background-light-gray) !important;
    background-size: cover !important;
    height: auto;
    /* Allow dynamic height */
}

/* Logo shrinking effect */
.dma-full-width.scroll #main-header .skin-logo {
    height: 50px !important;
    transition: height 0.3s ease !important;
}

.dma-full-width.scroll #main-header .skin-logo img {
    max-height: 50px !important;
}

/* Shrink the title size on scroll */
.dma-full-width.scroll #main-header .skin-title .title-text {
    font-size: 22px !important;
}

/* Menu visibility on scroll (Mobile) */
.dma-full-width.scroll #main-header .navbar-collapse {
    transition: opacity 0.3s ease;
    opacity: 1;
}

.dma-full-width.scroll #main-header .hamburger-menu {
    display: block !important;
}

/* Hamburger menu styling */
.dma-full-width #main-header .hamburger-menu {
    display: none;
    /* Hide initially */
    cursor: pointer;
    background: var(--white) !important;
    /* White background for the menu */
    border: none !important;
    /* Remove any borders */
    box-shadow: none !important;
    /* Remove any shadows */
    background-image: none !important;
    /* Remove gradient */
}

/* Hamburger Icon */
.dma-full-width #main-header .hamburger-menu div {
    width: 25px;
    height: 3px;
    background-color: var(--brand-blue);
    /* Hamburger icon color */
    margin: 5px 0;
    transition: 0.4s;
}

/* Top Navigation (otnav) Adjustments */
.otnav {
    background-color: transparent !important;
    background-image: none !important;
    filter: none !important;
    /* Remove old gradient filters */
}

.otnav ul li a:hover,
.otnav ul li:hover {
    background-color: transparent !important;
    /* Remove the background color */
    border-bottom: 3px solid var(--brand-blue);
    /* Add the blue underline */
    color: var(--dark-blue) !important;
    /* Ensure the text color remains consistent */
}


/* Hamburger menu overlay (active state) */
.hamburger-menu-overlay {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    /* Light overlay */
    display: none;
    z-index: 1002;
}

.hamburger-menu.active+.hamburger-menu-overlay {
    display: block;
}

.hamburger-menu-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    padding-top: 50px;
}

.hamburger-menu-overlay ul li a {
    color: var(--dark-blue) !important;
    text-decoration: none;
    font-size: 24px;
    padding: 15px;
    display: block;
    transition: color 0.3s;
}

.hamburger-menu-overlay ul li a:hover {
    color: var(--brand-blue);
    /* Change link color on hover */
}

/* Menu links */
.dma-full-width #main-header .navbar-collapse ul.nav-main li a {
    font-family: Arial;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 20px !important;
    text-transform: uppercase !important;
    color: var(--dark-blue) !important;
    background-color: transparent !important;
    /* Remove background */
    border-bottom: 3px solid transparent;
    /* Default no underline */
    transition: border-bottom 0.3s ease;
}

/* Hover effect for header items */
.dma-full-width #main-header .navbar-collapse ul.nav-main li a:hover {
    border-bottom: 3px solid var(--brand-blue);
    /* Blue underline on hover */
    color: var(--dark-blue) !important;
    background-color: transparent !important;
    /* Ensure no background */
}

.navbar-collapse.collapsing {
    opacity: 0 !important;
}

/* Highlight selected item in header */
.dma-full-width #main-header .navbar-collapse ul.nav-main li a.active {
    border-bottom: 3px solid var(--brand-blue);
    /* Blue underline for active */
    color: var(--dark-blue) !important;
    background-color: transparent !important;
}

/* Dropdown menu styling */
.dma-full-width #main-header .navbar-collapse ul.nav-main li .dropdown-menu {
    background-color: var(--white) !important;
    /* White background */
    padding: 0 !important;
    border: 1px solid var(--light-gray);
    /* Add subtle border */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    border-radius: 5px;
    /* Slight rounding */
}

/* Dropdown items styling */
.dma-full-width #main-header .navbar-collapse ul.nav-main li .dropdown-menu li a {
    color: var(--dark-blue) !important;
    padding: 10px 5px !important;
    background-color: transparent !important;
    text-align: left;
    transition: background-color 0.3s ease;
}

/* Hover effect for dropdown items */
.dma-full-width #main-header .navbar-collapse ul.nav-main li .dropdown-menu li a:hover {
    background-color: var(--brand-blue) !important;
    /* Blue background */
    color: var(--white) !important;
}

/* Active state for dropdown items */
.dma-full-width #main-header .navbar-collapse ul.nav-main li .dropdown-menu li.active a {
    background-color: var(--brand-blue) !important;
    /* Bright Blue background */
    color: var(--white) !important;
}

/* Carat Styling */
.dma-full-width #main-header .navbar-collapse ul.nav-main li a .fa-angle-down {
    color: var(--dark-blue);
    stroke-width: 1.5px;
    transition: transform 0.3s ease;
}

/* Carat rotation on hover */
.dma-full-width #main-header .navbar-collapse ul.nav-main li:hover .fa-angle-down {
    transform: rotate(90deg);
}

/* Search Icon Styling */
.dma-full-width #main-header .skin-header-right .mobile-search-link {
    display: inline-flex;
    /* Use flexbox for alignment */
    align-items: center;
    /* Center-aligns the icon vertically */
    margin-left: 20px;
    /* Adjust spacing as needed */
    padding: 0;
    /* Remove any extra padding */
    stroke-width: 3;
    stroke: var(--dark-blue);
}

/* Ensure the icon has consistent dimensions */
.dma-full-width #main-header .skin-header-right .mobile-search-link .fa {
    width: 30px;
    /* Adjust the width if needed */
    height: 30px;
    /* Adjust the height if needed */
    line-height: 25px;
    /* Align vertically */
    display: block;
    /* Ensure block display for alignment */
    margin: 0;
    /* Remove any margins */
    padding: 0;
    /* Remove any padding */
}

/* Search Input Box */
.dma-full-width #main-header .mobile-search-popup input,
.mobile-search-popup input {
    border-radius: 5px;
    background: #FFF;
    width: 418px;
    height: 55px;
    padding: 10px;
}

.dma-full-width #main-header .fa-bars {
    color: #80aff5 !important;

    .dma-full-width #main-header .fa-search {
        color: #80aff5 !important;
    }

    /* Responsive behavior */
    @media screen and (max-width: 768px) {

        .dma-full-width #main-header .skin-header-background,
        .dma-full-width.scroll #main-header .skin-header-background {
            height: auto !important;
            /* Adjust height dynamically */
        }

        .dma-full-width #main-header .skin-title .title-text {
            font-size: 20px !important;
        }

        /* Keep background transparent for header links */
        .dma-full-width #main-header .navbar-collapse ul.nav-main li a {
            background-color: transparent !important;
            color: var(--dark-blue) !important;
        }

        .dma-full-width #main-header .fa-bars {
            color: #80aff5 !important;
        }
    }


    /* Read More Button Styling */
    .button-read-more {
        display: inline-block;
        padding: 10px 20px;
        background-color: #0056b3;
        color: var(--white);
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }


    .button-read-more:hover {
        background-color: var(--dark-blue);
    }


    /* Footer layout */
    .skin-footer-background .container-fluid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .col-footerlinks a {
        color: white;
        text-decoration: none;
        margin-bottom: 10px;
    }

    .col-footerlinks a:hover {
        color: #009688;
        /* Hover effect */
    }

    a:hover {
        text-decoration: none;
        color: #2B73E5 !important;
    }

    h4 a:hover {
        color: var(--brand-blue) !important;
    }

    /* Footer banner */
    .skin-footer-banner {
        text-align: center;
        margin-top: 20px;
    }

    .skin-footer-banner a {
        color: white !important;
        font-size: 0.9rem;
        text-decoration: none;
    }

    .skin-footer-banner a:hover {
        color: #009688;
    }


    /* Carousel styling */
    .carousel-inner .item {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }


    .carousel-inner .item.active {
        position: relative;
        opacity: 1;
    }


    .carousel-inner .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .carousel-caption {
        position: absolute;
        right: 10%;
        bottom: 50px;
        left: auto;
        text-align: left;
        padding: 15px;
        border-radius: 10px;
        max-width: 300px;
    }


    .carousel-caption h2 {
        font-size: 55px;
        font-weight: bold;
        color: #ffffff;
    }


    .carousel-caption p {
        font-size: 24px;
        color: #ffffff;
    }



    /* Optional: Prevent bouncing during transitions */
    .carousel {
        position: relative;
        overflow: hidden;
        /* Prevent overflowing content */
    }


    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }


    .card-container .card {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #F5F5F5;
        padding: 0;
        /* Remove general padding from card */
        width: 300px;
        height: 410px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }


    .card-img-container {
        width: 100%;
    }


    .card-container .card img {
        width: 100%;
        height: 200px;
        object-fit: inherit;
    }


    .card-container .card-title {
        font-size: 18px;
        color: #1D385B;
        font-weight: bold;
        margin: 10px 0;
        text-align: left;
        margin-left: 15px;
    }


    .card-container .card-text {
        font-size: 14px;
        margin: 10px 0;
        text-align: left;
        padding: 0 15px 15px 15px;
    }


    .card-container .btn-primary {
        margin-top: auto;
        text-align: center;
        padding: 10px 15px;
        min-height: 40px;
    }


    .container-with-background .flip-card {
        background-color: transparent;
        width: 210px;
        height: 300px;
        perspective: 1000px;
        margin: 15px;
        display: inline-block;
    }


    .container-with-background .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }


    .container-with-background .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }


    .container-with-background .flip-card-front,
    .container-with-background .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        backface-visibility: hidden;
    }


    .container-with-background .flip-card-front {
        background-color: var(--brand-blue);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }


    .container-with-background .flip-card-back {
        background-color: transparent;
        color: white;
        border: 1px solid var(--brand-blue);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        transform: rotateY(180deg);
        padding: 20px;
    }


    .container-with-background .icon img {
        width: 50px;
        height: 55px;
        margin-bottom: 20px;
    }


    .flip-card-front p,
    .flip-card-back p {
        font-size: 16px;
        margin-bottom: 10px;
    }


    /* Leadership Section */
    .circular-image {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #ddd;
        margin: 0 auto;
    }

    .thumbnail {
        display: block;
        padding: 4px;
        margin-bottom: 20px;
        line-height: 1.42857143;
        border: none;
        border-radius: 4px;
        transition: border .2s ease-in-out;
    }

    .caption h3 {
        margin: 10px 0;
        font-weight: bold;
    }

    .caption p {
        margin: 5px 0;
        color: #666;
    }

    .directorate-button {
        margin-top: 20px;
        padding: 10px 20px;
    }

    /* Full-width carousel */
    #myStyledCarousel {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%);
    }


    .carousel-inner img {
        width: 100vw !important;
        height: auto;
    }


    /* Responsive footer layout */
    @media (max-width: 768px) {
        .skin-footer-background .container-fluid {
            flex-direction: column;
            align-items: center;
        }


        .col-footerlinks,
        .col-sociallinks {
            text-align: center;
        }


    }


    @media (max-width: 767px) {
        .carousel-caption {
            right: 5%;
            bottom: 20px;
            padding: 10px;
            max-width: 100%;
        }


        .carousel-caption h2 {
            font-size: 24px;
        }


        .carousel-caption p {
            font-size: 14px;
        }


    }


    /* JOAQUIN BASE STYLES */
    @media (min-width: 768px) {
        :root {
            --center-margin-left: calc(360px - 50vw);
            --center-padding: calc(50vw - 360px);
        }

    }


    @media (min-width: 992px) {
        :root {
            --center-margin-left: calc(470px - 50vw);
            --center-padding: calc(50vw - 470px);
        }

    }


    @media (min-width: 1200px) {
        :root {
            --center-margin-left: calc(570px - 50vw);
            --center-padding: calc(50vw - 570px);
        }

        .partners h2 {
            margin-top: 0;
        }

    }


    #breadcrumb {
        display: none;
    }


    .mb-5 {
        margin-bottom: 70px !important;
    }


    .mb-2 {
        margin-bottom: 35px !important;
    }


    .mt-0 {
        margin-top: 0 !important;
    }


    .mt-2 {
        margin-top: 40px !important;
    }

    .mt-3 {

        margin-top: 50px !important;

    }

    .pl-2 {
        padding-left: 80px;
    }


    .btn.btn-primary,
    .btn.btn-primary:focus,
    .livehtml .btn.btn-primary,
    .livehtml .btn.btn-primary:focus {
        background-color: #0056b3 !important;
        border-radius: 5px !important;
        color: #FFF !important;
        text-align: center !important;
        font-size: 15px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        padding: 8px 24px !important;
    }


    .btn.btn-primary:hover,
    .livehtml .btn.btn-primary:hover,
    .custom-btn:hover {
        background-color: #2059b8 !important;
        /* Darker color on hover */
        color: #FFF !important;
    }

    .btn.btn-primary,
    .livehtml .btn.btn-primary {
        background-color: #0056b3 !important;
        border-radius: 5px !important;
        color: #FFF !important;
        text-align: center !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        padding: 8px 24px 4px !important;
        border: 0 none !important;
        line-height: 24px !important;
        /* 171.429% */
    }

    .btn.btn-primary:hover,
    .btn.btn-primary:focus,

    .livehtml .btn.btn-primary:hover,
    .livehtml .btn.btn-primary:focus {
        background-color: var(--dark-blue) !important;
        color: #FFF !important;
        text-align: center !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        border: 0 none !important;

    }

    .blue-box .btn.btn-primary:hover,
    .livehtml .blue-box .btn.btn-primary:hover,

    .blue-box .btn.btn-primary:focus,
    .livehtml .blue-box .btn.btn-primary:focus {
        background-color: white !important;
        color: var(--brand-blue) !important;
    }


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

    /* Card container style */

    .card-container {
        text-align: center;
        /* Center-align the card container */
        display: flex;
        flex-wrap: wrap;
        /* Allow cards to wrap */

    }

    .text-center {
        text-align: center;
    }


    .text-primary {
        color: var(--brand-blue);
    }


    .row {
        display: flex;
    }


    .panel {
        border-radius: 0;
    }


    .left-line-panel .panel-heading {
        padding: 0 15px;
        border: 0 none;
    }


    .left-line-panel.panel-primary {
        border-right: 0 none;
        border-top: 0 none;
        border-bottom: 0 none;
        border-left: 3px solid var(--brand-blue);
        height: 100%;
        box-shadow: none;
    }


    .left-line-panel.panel-primary>.panel-heading {
        background: transparent
    }


    .panel-primary .panel-title {
        color: var(--brand-blue);
    }


    .left-line-panel .panel-body {
        padding: 0 15px;
    }


    p.subtitle {
        margin-bottom: 15px;
    }


    .blue-box {
        padding: 30px;
        background: var(--dark-blue);
        color: var(--white);
        border: 1px solid #C4C4C4;
        margin-bottom: 24px;
    }


    .blue-box h3 {
        color: var(--white);
        font-family: Helvetica;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 34px;
    }


    .blue-box .btn {
        margin-top: 36px;
    }


    .links-list {
        border-radius: 5px;
        border: 1px solid var(--Med-Gray, #C4C4C4);
        padding: 24px;
    }


    .links-list {
        border-radius: 5px;
        border: 1px solid var(--Med-Gray, #C4C4C4);
        padding: 24px;
    }


    .links-list h4 {
        margin-bottom: 24px;
    }


    .links-list ul {
        list-style: none;
        margin: 0;
    }


    .header {
        background-position: center center !important;
    }


    /* END JOAQUIN BASE STYLES */

    /*Hero Home Page*/

    /* Small arrow styles */
    .carousel-control {
        width: 50px;
        /* Adjusted width */
        height: 50px;
        /* Adjusted height */
        background-color: #969696;
        /* Grey background */
        display: flex;
        /* Flexbox for center alignment */
        align-items: center;
        /* Vertical center */
        justify-content: center;
        /* Horizontal center */
        position: absolute;
        /* Position absolute */
        top: 50%;
        /* Center vertically */
        transform: translateY(-50%);
        /* Adjust for centering */
        /* Bring the arrows above other elements */
    }


    .carousel-control .glyphicon {
        color: #ffffff;
        /* Color of the arrow */
        font-size: 20px;
        /* Adjust arrow size */
    }


    /* Optional: Prevent bouncing during transitions */
    .carousel {
        position: relative;
        overflow: hidden;
        /* Prevent overflowing content */
    }


    /* stacked cards */
    .card-container {
        display: flex;
        flex-wrap: wrap;
        /* Allow cards to wrap */
        justify-content: center;
        /* Center cards in the container */
        text-align: center;
        /* Center-align the card text */
    }


    .card-container .card {
        margin-bottom: 15px;
        /* Space between cards */
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 0;
        /* Remove general padding from card */
        background-color: #F5F5F5;
        /* Light grey background */
        width: 300px;
        /* Set width */
        height: 410px;
        /* Allow height to adjust according to content */
        display: flex;
        flex-direction: column;
        /* Stack image, title, description vertically */
        overflow: hidden;
        /* Ensure content doesn't overflow the card */
    }


    /* Image container */
    .card-img-container {
        width: 100%;
        /* Full width */
    }


    /* Image style */
    .card-container .card img {
        width: 100%;
        /* Ensure image fills the full width */
        height: 200px;
        /* or auto if you want flexible height */
        object-fit: inherit;
        /* Ensure image covers the container */
    }


    /* Title style */
    .card-container .card-title {
        font-size: 18px;
        /* Font size */
        color: #1D385B;
        /* Font color */
        font-weight: bold;
        /* Bold text */
        margin: 10px 0;
        /* Margin for spacing */
        text-align: left;
        /* Left-align title */
        margin-left: 15px;
    }


    /* Text style */
    .card-container .card-text {
        font-size: 14px;
        margin: 10px 0;
        /* Margin for spacing */
        text-align: left;
        /* Left-align text */
        padding: 0 15px 15px 15px;
        /* Add padding */
    }


    /* Button style */
    .card-container .btn-primary {
        margin-top: auto;
        /* Push the button to the bottom */
        text-align: left;
        /* Align button text to the left */
        padding: 10px 15px;
        /* Add padding to button for size */
        min-height: 40px;
        margin-top: auto;
        /* Automatically push button to the bottom */
        text-align: center;
        /* Center-aligns text within the button */
    }



    /* Media Queries for Responsiveness */
    @media (max-width: 768px) {
        .card-container .card {
            width: 100%;
            /* Make cards full width on small screens */
            height: auto;
            /* Allow height to adjust according to content */
        }



        .card-container .card img {
            height: auto;
            /* Allow image height to adjust */
        }


        .card-container .btn-primary {
            width: 100%;
            /* Allow button to fill available width on mobile */
            text-align: center;
            /* Center-align button text on small screens */
        }


    }


    /* flip card start */
    .container-with-background {
        margin-top: 100px;
        margin-bottom: 100px;
    }


    .container-with-background .container {
        max-width: 100%;
        overflow: hidden;
        padding: 0;
    }


    .container-with-background .body {
        background: #ffffff;
    }


    /* Header styling for card titles */
    .container-with-background .flip-card-front h3,
    .flip-card-back h3 {
        font-size: 24px;
        font-weight: 600;
        color: white;
        margin-bottom: 10px;
    }


    /* Flip card container */
    .container-with-background .flip-card {
        background-color: transparent;
        width: 210px;
        height: 300px;
        perspective: 1000px;
        margin: 15px;
        display: inline-block;
    }


    /* Row styling */
    .container-with-background .row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }


    /* Background for container */
    .container-with-background {
        background-image: url('/Portals/137/Images/Home/initiatives-bg.jpg');
        background-size: cover;
        background-position: center;
        padding: 40px 0;
    }


    /* Flip card inner container */
    .container-with-background .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }


    /* Flip effect */
    .container-with-background .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }


    /* Front and back card styling */
    .container-with-background .flip-card-front,
    .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        backface-visibility: hidden;
        /* Hide back face when front is visible */
    }


    /* Front card styling */
    .container-with-background .flip-card-front {
        background-color: #2b73e5;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }


    /* Back card styling */
    .flip-card-back {
        background-color: transparent;
        color: white;
        border: 1px solid #2b73e5;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Space elements evenly */
        align-items: center;
        transform: rotateY(180deg);
        /* Always rotated to be the back */
        padding: 20px;
    }


    /* Icon image styling */
    .container-with-background .icon img {
        width: 50px;
        height: 55px;
        margin-bottom: 20px;
        /* Space below the icon */
    }


    /* Paragraph text styling */
    .flip-card-front p,
    .flip-card-back p {
        font-size: 16px;
        margin-bottom: 10px;
    }



    @media (max-width: 1050px) {
        .col-sm-3 {
            width: 50%;
            /* Each column takes up half the width */
        }


        /* flip card end */
        /* CSS for Leadership Section */
        .circular-image {
            width: 150px;
            /* Increased width for better visibility */
            height: 150px;
            /* Increased height for better visibility */
            border-radius: 50%;
            /* Make the images circular */
            object-fit: cover;
            /* Cover the image properly */
            border: 2px solid #ddd;
            /* Optional border for image */
            margin: 0 auto;
            /* Center the image in the thumbnail */
        }


        .thumbnail {
            display: block;
            padding: 4px;
            margin-bottom: 20px;
            line-height: 1.42857143;
            border: none;
            border-radius: 4px;
            -webkit-transition: border .2s ease-in-out;
            -o-transition: border .2s ease-in-out;
            transition: border .2s ease-in-out;
        }


        .caption h3 {
            margin: 10px 0;
            /* Margin for spacing between name and title */
            font-weight: bold;
            /* Make name text bold */
        }


        .caption p {
            margin: 5px 0;
            /* Margin for spacing */
            color: #666;
            /* Lighter gray color for the title */
        }


        /* Button styling */
        .directorate-button {
            margin-top: 20px;
            /* Space above the button */
            padding: 10px 20px;
            /* Adjust padding for button */
        }


        /* Optional: Media Query for Responsiveness */
        @media (max-width: 768px) {
            .row {
                flex-direction: column;
                /* Stack vertically on small screens */
            }


        }


        .about-header {
            background: url("/Portals/137/Images/About/subpage-organization.jpg");
            background-size: cover;
            color: white;
            width: 100vw;
            padding: 100px var(--center-padding) 80px;
            margin-bottom: 80px;
        }


        .about-header h1 {
            color: white;
        }


        .footer-background {
            background-color: #1D385B;
            /* Setting the background color */
            color: #fff;
            /* Text color for visibility */
            padding: 20px 0;
            /* Optional padding for aesthetics */
            width: 100%;
            /* Full width for responsive design */
            margin: 0 auto;
            /* Centering the div */
        }


        .inner-container {
            max-width: 900px;
            /* Maximum width for inner container */
            width: 90%;
            /* Full width with max */
            margin: 0 auto;
            /* Centering the inner container */
        }


        .custom-divider {
            border-top: 1px solid #fff;
            /* White divider */
            margin: 20px 0;
        }


        .image-container img {
            width: 34px;
            height: 34px;
            margin-right: 5px;
            /* Space between images */
        }


        .left-aligned {
            float: left;
            margin-right: 15px;
            /* Space between image and text */
        }


        /* Responsive design for smaller screens */
        @media only screen and (max-width: 768px) {
            .row {
                display: flex;
                flex-direction: column;
                /* Stack the rows on smaller screens */
            }


            .col-xs-3 {
                width: 100%;
                /* Full width columns */
                margin-bottom: 15px;
                /* Space between columns */
            }


            .left-aligned {
                float: none;
                /* Remove float for mobile */
                display: block;
                /* Make sure the image comes on top */
                margin-right: 0;
                /* Reset margins */
                text-align: center;
                /* Center align text */
            }


            p {
                text-align: center;
                /* Center align text for mobile */
            }


        }


        /* Additional styles for very small screens */
        @media only screen and (max-width: 480px) {
            .inner-container {
                padding: 10px;
                /* Optional padding for smaller screens */
            }


        }

        .containers-v2 .container-title {
            color: #1D385B !important;
            /* Updated color */
            font-family: Helvetica !important;
            font-size: 30px !important;
            /* Updated font size */
            font-style: normal !important;
            font-weight: 700 !important;
            /* Keep it bold */
            line-height: 38px !important;
            /* 126.667% line height */
            margin-bottom: 8px !important;
            display: block !important;
            float: none !important;
            padding-left: 0 !important;
        }


        /* Breadcrumb Styles */
        .header-breadcrumb {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 1.2em;
        }

        .header-breadcrumb li {
            margin-right: 10px;
        }

        .header-breadcrumb li a {
            color: #FFFFFF;
            /* Text color for breadcrumb links */
            text-decoration: none;
        }

        .header-breadcrumb li a:hover {
            text-decoration: underline;
        }

        /* Separator between breadcrumb items */
        .header-breadcrumb li::after {
            content: "/";
            margin-left: 10px;
            color: #FFFFFF;
            /* Separator color */
        }

        /* Remove separator after the last breadcrumb item */
        .header-breadcrumb li:last-child::after {
            content: "";
        }


        /* ===================================================================
   CDAO custom section overrides and variables (Inter font and reset)
   =================================================================== */

        :root {
            --ink: #2a2a2a;
            --brand: #444444;
            --blue: #1D385B;
            --paper: #ffffff;
            --bg: #ffffff;
            --hairline: rgba(0, 0, 0, .10);
            --radius: 18px;
            --w-collapsed: min(320px, 92vw);
            --w-expanded: min(760px, 92vw);
            --ease: cubic-bezier(.16, 1, .3, 1);
            --dur: .62s;
        }

        /* Ensure CDAO elements use Inter font and carry correct sizing */
        .cdao-section-wrapper,
        .cdao-section-wrapper * {
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Scroll lock support for body preload */
        body.preload {
            overflow: hidden !important;
        }