@font-face {
    font-family: 'Segoe UI Variable';
    src: url('../fonts/segoe-ui-variable-cufonfonts/SegoeUIVF.ttf') format('truetype');
    font-weight: bolder;
    font-style: normal;
}

html {
    scroll-padding-top: 120px;
}


body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
input,
textarea {
    font-family: 'Segoe UI Variable', sans-serif !important;
    letter-spacing: 0 !important;
}

.bg-f7f7f7 {
    background-color: #F7F7F7 !important;
}

/* Make all page header banners same height on mobile */
@media (max-width: 768px) {

    .page-header-section,
    .banner-section-one,
    .contact-header-section {
        height: 90vh;
        min-height: 300px;
        padding: 40px 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-header-section,
    .banner-section-one,
    .contact-header-section,
    .banner-silder-one {
        max-height: 450px;
    }

    .page-header-heading {
        text-align: center !important;
    }

    .banner-slide-item-one {
        height: 40vh !important;
    }

    .banner-image-one img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
}


/* ------------------HEADER MOBILE START------------------ */
@media (max-width: 768px) {

    .social-icons {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .about-section-one .col-lg-6 {
        margin-bottom: 30px;
    }

    .about-section-mission .row,
    .about-section-vision .row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }

    .about-section-mission p,
    .about-section-vision p {
        width: 100%;
        max-width: 100%;
        text-align: justify;
        color: #999999;

    }

    .about-section-one video {
        width: 100%;
        height: auto;
    }

    .testimonial-slider-one .testimonial-item-one {
        margin-bottom: 20px;
    }

    .testimonial-slider-one .testimonial-author-image img {
        width: 70px;
        height: 70px;
    }

    .about-section-one .col-lg-6.col-sm-12:last-child {
        height: 200px !important;
        margin-bottom: 20px;
    }

}

/* ------------------HEADER MOBILE END------------------ */
/* ------------------HOMEPAGE DESKTOP START------------------ */

.stat-item h2 {
    font-size: 50px;
    margin: 0 0 10px;
    font-weight: bold;
    color: white;
}

.stat-item p {
    font-size: 20px;
    margin: 0;
}

.stat-item i {
    font-size: 50px !important;
    padding-top: 10px;
}

.stat-item {
    margin-bottom: 30px;
}


.sdg-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 5px solid #fff;
    border-radius: 12px;
    min-height: 120px;
    text-align: center;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.sdg-box:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.sdgc-number {
    font-size: 24px;
    margin-bottom: 8px;
}

.sdg-title {
    font-size: 14px;
}

.sdg-box {
    transition: transform 0.3s;
    cursor: pointer;
}

.sdg-box:hover .sdg-img {
    filter: brightness(50%);
    transform: scale(1.05);
}

.sdg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s;
}

.sdg-box:hover .sdg-overlay {
    opacity: 1;
}

.sdg-overlay .btn {
    opacity: 1;
    transition: opacity 0.3s;
}

.sdg-btn-index {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: #fff;
    color: #0480FF;
    border-radius: 35px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    margin-top: 20px;
}

.sdg-btn-index .sdg-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #0480FF;
    color: #fff;
    border-radius: 40px;
    transition: all 0.3s ease;
}

.sdg-btn-index .sdg-icon-container i {
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

.sdg-btn-index:hover {
    background-color: #0480FF;
    color: #fff;
}

.sdg-btn-index:hover .sdg-icon-container {
    background-color: #fff;
    color: #0480FF;
}

.sdg-btn-index:hover .sdg-icon-container i {
    color: #0480FF;
}

.sdg-icon-container-w {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #fff;
    color: #0480FF;
    border-radius: 40px;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.sdg-icon {
    color: #fff;
    font-size: 14px;
}

.stakeholder-slider {
    position: relative;
}

.stakeholder-slider .slick-prev,
.stakeholder-slider .slick-next {
    position: absolute;
    bottom: -20%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #0480FF;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.stakeholder-slider .slick-prev:hover,
.stakeholder-slider .slick-next:hover {
    background: linear-gradient(to right, #0480FF, #0B0088);
    transform: translateY(-50%) scale(1.1);
}

.stakeholder-slider .slick-prev {
    left: 0;
}

.stakeholder-slider .slick-next {
    right: 0;
}

.stakeholder-slider .slick-prev:before,
.stakeholder-slider .slick-next:before {
    content: '';
    display: none;
}

.stakeholder-slider .slick-prev:after {
    content: '←';
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    color: white;
    font-size: 20px;
}

.stakeholder-slider .slick-next:after {
    content: '→';
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    color: white;
    font-size: 20px;
}

.stakeholder-slider .slick-dots {
    position: relative;
    bottom: -40px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.stakeholder-slider .slick-dots li {
    margin: 0 16px;
}

.stakeholder-slider .slick-dots li button {
    width: 16px;
    height: 16px;
    border-radius: 6px;
    background: #636363;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0;
    padding: 0;
    display: block;
}

.stakeholder-slider .slick-dots li.slick-active button {
    background: #0480FF;
    width: 35px;
    height: 16px;
    border-radius: 14px;
    transform: scale(1.5);
}

.stakeholder-slider .slick-dots li button:hover {
    background: linear-gradient(to right, #0480FF, #0B0088);
}

.stakeholder-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    height: auto;
    text-align: center;
}


.stakeholder-box img {
    height: 120px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    margin-bottom: 15px;
    flex-shrink: 0;
}

.stakeholder-box h5 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 15px 0;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
    padding: 20px 5px;
    color: #1b1b1b;
}

.shortname {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    min-height: 45px;
    border: 2px solid #333;
    border-radius: 40px;
    background: transparent;
    flex-shrink: 0;
    margin-top: auto;
    padding: 0 20px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
}



.banner-section-one {
    position: relative;
    overflow: visible;
}

.banner-metrics-box {
    position: relative;
    margin: -120px auto 0 auto;
    background-color: #0480FF;
    border-radius: 15px;
    padding: 0 50px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 1600px;
    height: 312px;
    z-index: 10;
}

.metric-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.metric-icon {
    font-size: 55px;
    color: #fff;
    margin-bottom: 10px;
}

.metric-value {
    font-size: 50px;
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: 700 !important;
    margin: 0;
    color: #fff;
    text-align: center;
}

.metric-label {
    font-size: 24px;
    color: #fff;
    margin: 0;
    text-align: center;
}

.sdg-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.sdg-table th {
    background-color: #f8f9fa;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
}

.sdg-table td {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: top;
}

.no-content {
    text-align: center;
    padding: 40px;
    color: #666;
}

.no-content i {
    font-size: 48px;
    margin-bottom: 20px;
    color: #ccc;
}

.problem-container {
    border-radius: 20px;
    padding: 80px 0;
    width: 100%;
}


.section-line {
    width: 420px;
    height: 8px;
    background: linear-gradient(135deg, #0B0088, #0480FF);
    margin: 12px auto 0;
}

.problem-card {
    border-radius: 20px;
    color: black;
    position: relative;
}

.problem-badge {
    display: block;
    margin: 10px 0;
    padding: 10px 15px;
    text-align: start;
    border-radius: 50px;
    font-weight: bold;
    font-size: 20px;
    width: fit-content;
    background-color: #E2F6FF;
}

.problem-badge span {
    background: linear-gradient(to right, #064D99, #0480FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.problem-subtitle {
    font-weight: 600;
    margin-bottom: 25px;
    padding-right: 250px;
    text-align: start;
    font-size: 20px;
    background: linear-gradient(to right, #064D99, #0480FF, #064D99);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.problem-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.problem-list li {
    background-color: #0480FF;
    display: block;
    margin: 0 10px 20px;
    color: #fff;
    padding: 10px 15px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 18px;
    width: fit-content;
}

.problem-list i {
    background: #fff;
    color: #0480FF;
    padding: 8px;
    margin-right: 8px;
    border-radius: 50%;
    font-size: 16px;
}

.solution-box {
    border-radius: 20px;
    position: relative;
}

.solution-badge {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFF4D0;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    width: fit-content;
    font-size: 20px;
    font-weight: bold;
}

.solution-badge span {
    background: linear-gradient(to left, #FFD64F, #E1B938);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.solution-text {
    font-size: 36px;
    color: #EEC540;
    line-height: 1.3;
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.solution-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.solution-content span {
    display: block;
    line-height: 1.2;
}

.line-1 {
    margin-bottom: 5px;
}

.line-2 {
    margin-bottom: 10px;
}

.line-3 {
    margin-bottom: 5px;
}

.line-4 {
    margin-bottom: 0;
}

.solution-text .quote-mark {
    font-size: 80px;
    font-weight: 800;
    color: #EEC540;
    line-height: 0.7;
}

.solution-text .quote-mark.open {
    align-self: flex-start;
    margin-top: -5px;
}

.solution-text .quote-mark.close {
    align-self: flex-end;
    margin-bottom: -30px;
}

.solution-col {
    transform: translateX(100px);
}

.solution-btn {
    background: linear-gradient(135deg, #024D99, #0480FF);
    color: white;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.solution-btn:hover {
    opacity: 0.85;
    color: white;
}

.image-with-bottom-shadow {
    position: absolute;
    display: inline-block;
    margin: 20px 0;
}

.image-with-bottom-shadow img {
    max-width: 500px;
    height: auto;
}

.image-with-bottom-shadow::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    filter: blur(8px);
    z-index: -1;
}

.desktop-problem-solution {
    display: block;
}

.mobile-problem-solution {
    display: none;
}

.counter-wrapper {
    display: inline-block;
    min-width: 110px;
    text-align: left;
}

.counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.asean-section-one .stat-item {
    position: relative;
    text-align: left;
}

.asean-section-one .stat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
}

.label-box {
    display: inline-block;
    background: #EEC540;
    padding: 10px 20px;
    border-radius: 25px;
}

.label-box h5 {
    margin: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
}

.section-line-sus {
    width: 315px;
    height: 8px;
    background: linear-gradient(135deg, #0B0088, #0480FF);
}

.sdg-overlay-disabled {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    z-index: 2;
}

.stakeholder-section-one .container {
    padding-left: 0;
    padding-right: 0;
}


/* Base adjustments for smaller desktops (≤ 1200px) */
@media (max-width: 1300px) {
    .problem-section-one {
        padding: 50px 20px;
    }

    .heading-title {
        font-size: 32px;
    }

    .section-line {
        width: 415px;
        height: 6px;
    }

    .problem-badge {
        font-size: 18px;
        padding: 8px 12px;
    }

    .problem-subtitle {
        font-size: 16px;
        padding-right: 20px;
        margin: 0 auto 25px;
    }

    .problem-list li {
        font-size: 16px;
        padding: 8px 12px;
        text-align: left;
        display: flex;
    }

    .solution-badge {
        font-size: 18px;
        padding: 8px 15px;
        position: relative;
        white-space: nowrap;
        top: -80px;
    }

    .solution-badge img {
        width: 25px !important;
        height: 25px !important;
        margin-right: 6px !important;
    }

    .solution-text {
        font-size: 24px;
        margin-top: 0 !important;

    }

    .solution-text .quote-mark {
        font-size: 50px;
    }

    .solution-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .image-with-bottom-shadow img {
        max-width: 280px !important;
        height: auto;
        margin-top: 80px;
    }

    .solution-col {
        transform: translateX(70px);
    }

    .banner-metrics-box {
        padding: 0 30px;
        height: auto;
        /* width: 800px; */
        margin: -90px auto 0 auto;
    }

    .metric-icon img {
        width: 40px !important;
        height: 40px !important;
    }

    .metric-value {
        font-size: 36px;
    }

    .metric-label {
        font-size: 16px;
        padding-bottom: 20px;
    }

    .desktop-problem-solution {
        display: block;
    }

    .mobile-problem-solution {
        display: none;
    }
}

.dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-item {
    padding: 16px 7px;
}

#before-section img,
#now-section img {
    max-height: 500px;
}


@media (max-width: 992px) {

    #before-section img,
    #now-section img {
        max-height: 380px;
    }

    .about-section-three.ecosystem .column:nth-child(1) {
        order: 2;
    }

    .about-section-three.ecosystem .column:nth-child(2) {
        order: 1;
    }

    .green-lane-container .bottom-line-left {
        margin-top: 50px !important;
    }

    .green-lane-container .bottom-line-right {
        margin-top: 50px !important;
    }

    /* Problem Solution Section */
    .desktop-problem-solution {
        display: none !important;
    }

    .mobile-problem-solution {
        display: block !important;
    }

    .problem-badge {
        text-align: center !important;
        margin: 0 auto 15px auto !important;
        width: auto !important;
        font-size: 20px !important;
        padding: 10px 12px !important;
    }

    .mobile-toggle button {
        padding: 10px 20px;
        margin: 0 8px;
        border-radius: 25px;
        border: none;
        background: #fff;
        color: #0A80FF;
        border: 1px solid #0480FF;
        font-weight: 600;
        transition: 0.3s;
    }

    .mobile-toggle button.active {
        background: #0480FF;
        color: #fff;
    }

    .mobile-toggle button:hover {
        opacity: 0.85;
    }

    .problem-card-mobile,
    .solution-card-mobile {
        padding: 20px;
        background: #fff;
        margin-bottom: 20px;
        text-align: center;
    }

    .heading-title-mobile {
        font-size: 24px !important;
        padding-top: 20px;
        background: linear-gradient(135deg, #0B0088, #0480FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
        text-align: center;
    }

    .section-line-mobile {
        width: 260px;
        height: 8px;
        background: linear-gradient(135deg, #0B0088, #0480FF);
        margin: 8px auto 0;
    }

    .solutions-badge {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        padding: 10px 25px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 20px;
        background-color: #FFF4D0;
    }

    .solutions-badge span {
        background: linear-gradient(to left, #FFD64F, #E1B938);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    .solution-text-mobile {
        position: relative;
        font-size: 32px;
        color: #EEC540;
        line-height: 1.3;
        margin-top: 15px;
        text-align: center;
        padding: 20px;
    }

    .quote-mark-mobile.open {
        position: absolute;
        left: 300px;
        top: -10px;
        font-size: 80px;
        color: #EEC540;
    }

    .quote-mark-mobile.close {
        position: absolute;
        right: 300px;
        bottom: -50px;
        font-size: 80px;
        color: #EEC540;
    }

    .solution-content span {
        display: block;
    }

    .quote-mark {
        font-size: 50px;
        color: #EEC540;
    }

    .mobile-bottom-image {
        position: relative;
        padding-bottom: 20px;
    }

    .mobile-bottom-image::after {
        content: '';
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        height: 15px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        filter: blur(8px);
        z-index: -1;
    }

    .problem-section-one .heading-title+div {
        width: 255px !important;
        margin: 10px auto 0 !important;
    }

    .problem-section-one .col-lg-6 {
        margin-bottom: 40px !important;
    }

    .problem-subtitle {
        font-weight: 600;
        margin-bottom: 25px;
        text-align: center;
        font-size: 20px;
        padding: 0 0;
    }

    .problem-list {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .problem-list li {
        background-color: #0480FF;
        color: #fff;
        padding: 10px 20px;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: auto;
    }

    .problem-list li i {
        color: #0480FF;
        padding: 8px;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .problem-section-one .col-lg-6:first-child>div {
        width: 100% !important;
        height: auto !important;
        padding: 30px 20px !important;
    }

    .problem-section-one .col-lg-6:first-child>div>div {
        right: 20px !important;
        font-size: 16px !important;
        padding: 6px 15px !important;
        text-align: center;
        white-space: normal !important;
    }

    .problem-section-one ul {
        padding: 0 10px !important;
    }

    .problem-section-one li {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    .problem-section-one li span:first-child {
        width: 28px !important;
        height: 28px !important;
        margin-right: 8px !important;
    }

    .problem-section-one .col-lg-6:last-child>div:first-child img {
        max-width: 250px !important;
        padding-bottom: 20px !important;
    }

    .problem-section-one .col-lg-6:last-child>div:last-child {
        max-width: 100% !important;
        padding: 20px !important;
    }

    .problem-section-one .col-lg-6:last-child>div:last-child>div {
        top: -45px !important;
        font-size: 16px !important;
        padding: 15px 20px !important;
    }

    .problem-section-one .col-lg-6:last-child>div:last-child p {
        font-size: 16px !important;
    }

}

/* ------------------HOMEPAGE DESKTOP START------------------ */
/* ------------------HOMEPAGE MOBILE START------------------ */
@media (max-width: 768px) {
    .page-header-section {
        background-position: center center !important;
        padding: 180px 0 !important;
        padding-top: 260px !important;
        /* padding-bottom: 220px !important; */
    }

    .page-header-section .page-header-heading h1 {
        font-size: 35px !important;
        line-height: 1.3;
    }

    .page-header-section .page-header-heading h3 {
        font-size: 16px !important;
        line-height: 1.4;
        color: #fff !important;
    }

    .page-header-section .sdg-btn-index {
        padding: 8px 16px !important;
        font-size: 14px !important;
        display: inline-block;
        margin-top: 15px;
    }

    .page-header-section .sdg-btn-index .overlay-icon {
        font-size: 16px !important;
    }

    .page-header-section .page-header-heading {
        text-align: center !important;
        padding: 0 10px;
    }

    /* Page Header Section */
    .page-header-section {
        background-position: center center !important;
    }

    .page-header-section>div {
        padding: 80px 0 !important;
    }

    .page-header-heading h1 {
        font-size: 24px !important;
        padding: 0 15px;
    }

    .page-header-heading h3 {
        font-size: 16px !important;
        padding: 0 15px;
    }

    .stat-item h2 {
        font-size: 40px !important;
        margin: 0 0 5px !important;
    }

    .stat-item p {
        font-size: 14px !important;
    }

    .stat-item i {
        font-size: 24px !important;
        padding-top: 10px !important;
    }

    .stat-item {
        margin-bottom: 20px !important;
    }

    /* Banner Metrics Box  */
    .banner-metrics-box {
        margin: -80px 15px 20px 15px;
        padding: 35px 10px;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        width: auto;
        border-radius: 25px;

        top: 30px;
    }

    .metric-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin: -10px 0;
    }

    .metric-icon {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 50px;
        margin-bottom: 5px;
    }

    .metric-icon img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }

    .metric-value {
        font-size: 20px !important;
        margin: 0;
        text-align: center;
    }

    .metric-label {
        font-size: 14px !important;
        margin: 0;
        text-align: center;
    }

    .banner-metrics-box .row>[class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 10px;
    }

    /* Problem Solution Section */
    .desktop-problem-solution {
        display: none !important;
    }

    .mobile-problem-solution {
        display: block !important;
    }

    .problem-badge {
        text-align: center !important;
        margin: 0 auto 15px auto !important;
        width: auto !important;
        font-size: 20px !important;
        padding: 10px 12px !important;
    }

    .mobile-toggle button {
        padding: 10px 20px;
        margin: 0 8px;
        border-radius: 25px;
        border: none;
        background: #fff;
        color: #0A80FF;
        border: 1px solid #0480FF;
        font-weight: 600;
        transition: 0.3s;
    }

    .mobile-toggle button.active {
        background: #0480FF;
        color: #fff;
    }

    .mobile-toggle button:hover {
        opacity: 0.85;
    }

    .problem-card-mobile,
    .solution-card-mobile {
        padding: 20px;
        background: #fff;
        margin-bottom: 20px;
        text-align: center;
    }

    .heading-title-mobile {
        font-size: 24px !important;
        padding-top: 20px;
        background: linear-gradient(135deg, #0B0088, #0480FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
        text-align: center;
    }

    .section-line-mobile {
        width: 260px;
        height: 8px;
        background: linear-gradient(135deg, #0B0088, #0480FF);
        margin: 8px auto 0;
    }

    .solutions-badge {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        padding: 10px 25px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 20px;
        background-color: #FFF4D0;
    }

    .solutions-badge span {
        background: linear-gradient(to left, #FFD64F, #E1B938);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }


    .solution-text-mobile {
        position: relative;
        font-size: 32px;
        color: #EEC540;
        line-height: 1.3;
        margin-top: 15px;
        text-align: center;
        padding: 20px;
    }

    .quote-mark-mobile.open {
        position: absolute;
        left: 30px;
        top: -10px;
        font-size: 80px;
        color: #EEC540;
    }

    .quote-mark-mobile.close {
        position: absolute;
        right: 50px;
        bottom: -50px;
        font-size: 80px;
        color: #EEC540;
    }


    .solution-content span {
        display: block;
    }

    .quote-mark {
        font-size: 50px;
        color: #EEC540;
    }

    .mobile-bottom-image {
        position: relative;
        padding-bottom: 20px;
    }

    .mobile-bottom-image::after {
        content: '';
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        height: 15px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        filter: blur(8px);
        z-index: -1;
    }

    .problem-section-one .heading-title+div {
        width: 255px !important;
        margin: 10px auto 0 !important;
    }

    .problem-section-one .col-lg-6 {
        margin-bottom: 40px !important;
    }

    .problem-subtitle {
        font-weight: 600;
        margin-bottom: 25px;
        text-align: center;
        font-size: 20px;
        padding: 0 0;
    }

    .problem-list {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .problem-list li {
        background-color: #0480FF;
        color: #fff;
        padding: 10px 20px;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: auto;
    }

    .problem-list li i {
        color: #0480FF;
        padding: 8px;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .problem-section-one .col-lg-6:first-child>div {
        width: 100% !important;
        height: auto !important;
        padding: 30px 20px !important;
    }

    .problem-section-one .col-lg-6:first-child>div>div {
        right: 20px !important;
        font-size: 16px !important;
        padding: 6px 15px !important;
        text-align: center;
        white-space: normal !important;
    }

    .problem-section-one ul {
        padding: 0 10px !important;
    }

    .problem-section-one li {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    .problem-section-one li span:first-child {
        width: 28px !important;
        height: 28px !important;
        margin-right: 8px !important;
    }

    .problem-section-one .col-lg-6:last-child>div:first-child img {
        max-width: 250px !important;
        padding-bottom: 20px !important;
    }

    .problem-section-one .col-lg-6:last-child>div:last-child {
        max-width: 100% !important;
        padding: 20px !important;
    }

    .problem-section-one .col-lg-6:last-child>div:last-child>div {
        top: -45px !important;
        font-size: 16px !important;
        padding: 15px 20px !important;
    }

    .problem-section-one .col-lg-6:last-child>div:last-child p {
        font-size: 16px !important;
    }

    /* ASEAN Section */

    .asean-section-one {
        padding: 40px 20px !important;
        text-align: center;
    }

    /* Center the TOTAL ASEAN title */
    .asean-section-one .heading-box {
        padding: 0 !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }

    .asean-section-one .label-box h5 {
        text-align: center !important;
        margin: 0 auto !important;
    }

    .asean-section-one .stat-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        text-align: center !important;
        margin: 30px 0;
    }

    .asean-section-one .stat-item::after {
        display: none !important;
    }

    .asean-section-one .stat-item:nth-child(odd)::after {
        display: block !important;
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 100%;
        background-color: rgba(255, 255, 255, 1);
    }

    .asean-section-one .stat-content {
        text-align: center !important;
    }

    .asean-section-one .stat-content .icon img {
        width: 40px !important;
        height: 40px !important;
    }

    .asean-section-one .stat-content .icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 10px !important;
    }

    .asean-section-one img[alt="Left Decoration"] {
        width: 140px !important;
        bottom: -10px !important;
    }

    .asean-section-one img[alt="Right Decoration"] {
        width: 140px !important;
        top: -10px !important;
    }

    .stat-item {
        display: flex;
        justify-content: center !important;
        padding: 0 20px !important;
    }

    .stat-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 200px;
    }

    .stat-item h2,
    .stat-item p {
        white-space: nowrap;
        width: 100%;
        text-align: center;
    }

    .stat-item .icon {
        display: flex;
        width: 60px;
        height: 60px;
    }

    .stat-item .icon i {
        font-size: 2rem;
    }

    .stat-item h2.counter {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 30px !important;
    }

    .stat-item p {
        min-height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px !important;
        margin-top: 0.5rem;
    }

    /* Sustainability Section */
    .sustain-section-one .container {
        padding: 10px 20px !important;

    }

    .sustain-section-one {
        padding: 0 20px;
    }

    .sustain-section-one .heading-title {
        font-size: 24px !important;
    }

    .sustain-section-one .heading-box p {
        padding-top: 20px !important;
        font-size: 14px !important;
        text-align: justify;
    }

    .sustain-section-one .section-line-sus {
        width: 195px;
        height: 8px;
        background: linear-gradient(135deg, #0B0088, #0480FF);
        margin: 0 auto;
    }

    .sustain-section-one .col-6.col-md-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 15px;
    }

    .sustain-section-one .sdg-overlay .sdg-btn {
        font-size: 14px !important;
        padding: 4px 10px !important;
    }

    .sustain-section-one .sdg-overlay .overlay-icon {
        font-size: 12px !important;
        margin-left: 4px;
    }

    .sustain-section-one .sdg-overlay .sdg-icon-container {
        display: inline-flex;
        align-items: center;
    }


    /* SDG Modal */
    #sdgModal .modal-body {
        padding: 80px 30px !important
    }

    #sdgModal .modal-dialog {
        max-width: 95%;
        margin: 20px 20px;
    }

    #sdgModal .sdg-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
        width: 100%;
    }

    #sdgModal .sdg-header img#sdgImage {
        max-width: 60px !important;
        height: auto;
        flex-shrink: 0;
    }

    #sdgModal .sdg-header div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
    }

    #sdgModal #sdgNumber {
        font-size: 24px !important;
        margin-bottom: 2px;
    }

    #sdgModal #sdgTitle {
        font-size: 14px !important;
    }

    #sdgModal #sdgDescription {
        font-size: 14px !important;
        text-align: justify;
    }

    .sdg-row-mobile {
        background: #fff;
        border-radius: 15px;
        padding: 15px 20px;
        margin-bottom: 15px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    }

    .sdg-row-mobile h4 {
        font-size: 20px;
        color: #0480FF;
        margin-bottom: 8px;
        text-align: left;
    }

    .sdg-row-mobile p {
        font-size: 14px !important;
        color: #000 !important;
        margin-bottom: 10px;
        line-height: 1.5;
    }

    .sdg-row-mobile ul,
    .sdg-row-mobile li {
        color: #000 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Industry Linkages */
    .stakeholder-section-one {
        padding: 0 0 60px;
    }

    .stakeholder-section-one .row.align-items-center.mb-5 {
        flex-direction: column;
        gap: 20px;
    }

    .stakeholder-section-one .col.text-center {
        margin-left: 0 !important;
        width: 100%;
    }

    .stakeholder-section-one .col-auto.ms-auto {
        margin-left: 0 !important;
        margin-right: auto;
    }

    .stakeholder-slider {
        padding: 0 40px !important;
    }

    .stakeholder-box {
        min-width: 150px;
        height: 250px !important;
        margin: 0 8px;
        padding: 15px 10px !important;
    }

    .stakeholder-box img {
        max-width: 100px !important;
        height: 80px !important;
    }

    .stakeholder-box h5 {
        font-size: 14px !important;
        height: 80px !important;
        padding: 10px 5px !important;
    }

    .why-cla-box h3 {
        font-size: 24px !important;
        padding: 0;
    }

    .shortname {
        width: 120px !important;
        height: 35px !important;
        font-size: 12px !important;
    }

    /* Slider Navigation */
    .stakeholder-slider .slick-prev,
    .stakeholder-slider .slick-next {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 35px !important;
        height: 35px !important;
        background: #0480FF;
        z-index: 100 !important;
    }

    .stakeholder-slider .slick-prev {
        left: 25px !important;
    }

    .stakeholder-slider .slick-next {
        right: 25px !important;
    }

    /* Make arrows more touch-friendly on mobile */
    .stakeholder-slider .slick-prev:after,
    .stakeholder-slider .slick-next:after {
        font-size: 18px !important;
    }

    .stakeholder-slider .slick-dots {
        bottom: -30px !important;
    }

    .stakeholder-slider .slick-dots li {
        margin: 0 8px !important;
    }

    .stakeholder-slider .slick-dots li button {
        width: 12px !important;
        height: 12px !important;
    }

    .stakeholder-slider .slick-dots li.slick-active button {
        width: 25px !important;
        height: 12px !important;
    }

    .stakeholder-section-one .col.text-center {
        margin-left: 0 !important;
        text-align: center !important;
    }

    .stakeholder-section-one .row {
        justify-content: center !important;
    }

    .stakeholder-section-one .col-auto.ms-auto {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .stakeholder-section-one .dropdown {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

/* ------------------HOMEPAGE MOBILE END------------------ */
/* ------------------------- INSIGHT DETAILS DESKTOP START------------------------- */
.back-link {
    display: inline-block;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    font-size: 20px;
    margin-top: 100px;
    margin-bottom: 20px;
}

.back-link:hover {
    color: #0480FF;
}

.separator-line {
    margin: 0;
    border: 0;
    border-top: 1px solid #4d4d4dff;
}

.insights-title {
    font-weight: bold;
    font-size: 64px;
    color: #0480FF;
    margin-top: 0;
}

.insights-date {
    font-size: 18px;
    color: #000000;
}

.insights-main-image {
    overflow: hidden;
    border-radius: 25px;
    width: 100%;
    height: auto;
    align-items: center;
}

.insights-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.insights-description {
    font-size: 18px;
    text-align: justify;
    line-height: 2.0;
    color: #333;
}

.btn-back {
    color: #000000ff;
    font-weight: 500;
    text-decoration: none;
}

/* ------------------------- INSIGHT DETAILS DESKTOP END------------------------- */
/* ------------------------- INSIGHT DESKTOP START------------------------- */
.insights-section {
    background-color: #fff;
    overflow-x: hidden;
    padding: 80px 0;
}

.insights-btn {
    background: #fff;
    color: #0480FF;
    border: 1px solid #0480FF;
    border-radius: 28px;
    padding: 10px 25px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.insights-btn:hover,
.insights-btn.active {
    background: linear-gradient(to right, #024D99, #0480FF);
    color: #fff;
    transform: translateY(-2px);
}

.insights-card img {
    height: 350px;
    object-fit: cover;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
}

.image-wrapper img {
    transition: transform 0.4s ease;
}

.image-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.image-wrapper .overlay-icon {
    font-size: 3.5rem;
    color: #fff;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
}

.image-wrapper:hover img {
    transform: scale(1.05);
}

.image-wrapper:hover .overlay {
    opacity: 1;
}

.image-wrapper:hover .overlay-icon {
    opacity: 1;
    transform: translateY(0);
}

.card-body {
    position: relative;
    overflow: hidden;
}

.card-body::before {
    content: "";
    position: absolute;
    bottom: 70px;
    left: 250px;
    width: 140px;
    height: 140px;
    background-image: url("/images/internal_assets/watermark.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.card-body * {
    position: relative;
    z-index: 1;
}

/* ------------------------- INSIGHT DESKTOP END------------------------- */
/* ------------------------- INSIGHT MOBILE START------------------------- */
@media (max-width: 768px) {

    .insights-header-mobile {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

    .insights-title {
        font-size: 30px !important;
    }

    .insights-header-mobile::-webkit-scrollbar {
        display: none;
    }

    .year-box {
        flex: 0 0 auto;
    }

    .category-box {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        flex: 0 0 auto;
    }

    .insights-btn {
        padding: 8px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    #yearDropdown {
        padding: 8px 16px !important;
        white-space: nowrap;
        font-size: 14px;
    }
}

/* ------------------------- INSIGHT MOBILE END------------------------- */
/* ----------------------- INSIGHT DETAILS MOBILE START ----------------------- */
@media (max-width: 768px) {

    .insights-detail-content {
        padding: 0 40px !important;
    }

    .back-link {
        font-size: 14px;
        margin-top: 30px !important;
        padding: 5px 0 !important;
        z-index: 10;
        position: relative;
    }

    .insights-description {
        white-space: normal !important;
    }

    .insights-description~div[style*="float"],
    .insights-description+div[style*="float"],
    .insights-detail-content div[style*="float"],
    .insights-detail-content div[style*="width"],
    .insights-detail-content div[style*="margin"] {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ------------------------- INSIGHT DETAILS MOBILE  END------------------------- */
/* ------------------------- CONTACT US START ------------------- */

.contact-header-section {
    background-image: url('/images/internal_assets/contact1.jpg');
    background-color: rgba(0, 0, 0, 0.7);
    background-size: cover;
    padding: 180px 0;
    background-position: 100% 40%;
}

.contact-header-inner {
    padding: 120px 80px;
}

.contact-header-title {
    font-weight: 600;
    color: white;
}

.contact-header-subtitle {
    text-align: center;
    color: white;
}

/* GET IN TOUCH */
.contact-get-in-touch {
    padding: 40px 0;
}

.contact-card {
    background-color: #F9F9F9;
    border-radius: 20px;
    padding: 50px 50px;
    width: 80%;
    overflow: hidden;
    margin: 50px 50px;
}

.contact-row {
    min-height: 600px;
}

.contact-get-title {
    color: #0480FF;
    font-weight: 900 !important;
    font-size: 42px;
}

.contact-get-desc {
    font-size: 20px;
    color: #000;
    padding-top: 10px;
}

.contact-form-image {
    width: 100%;
    max-width: 600px;
    height: 100%;
    max-height: 600px;
    border-radius: 20px;
    object-fit: cover;
}

/* BUTTON */
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #fff;
    color: #0480FF;
    border-radius: 35px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-btn:hover {
    background-color: #0480FF;
    color: #fff;
}

.contact-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #0480FF;
    color: #fff;
    border-radius: 40px;
    transition: transform 0.3s ease;
}

.contact-btn:hover .contact-icon-container {
    background-color: #fff;
    color: #0480FF;
    transform: translateX(2px);
}

/* PARTNERSHIP */
.contact-partnership-section {
    padding: 0 190px;
}

.contact-partnership-box {
    min-height: 50px;
    background: #f9f9f9;
    border-radius: 20px;
}

.contact-person-name {
    color: #0480FF;
    font-weight: 600;
    font-size: 18px;
}

.contact-person-info {
    gap: 25px;
    font-size: 16px;
}

.contact-partnership-image {
    width: 100%;
    max-width: 700px;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: 20px;
}

.contact-person-info p {
    margin-bottom: 10px;
    font-size: 20px;
    color: #000;
}

.contact-partnership-section h4 {
    font-size: 30px;
    line-height: 1.8;
    font-weight: 800 !important;
}


/* OFFICES */
.contact-operational-section {
    padding: 60px 180px;
    background: #fff;
}

.contact-country-btn {
    background: linear-gradient(to right, #024D99, #0480FF);
    border: none;
    border-radius: 20px;
    padding: 10px 30px;
}

.contact-flag {
    width: 20px;
    height: 14px;
    margin-right: 5px;
}

.contact-company-title {
    color: #0480FF;
    font-size: 42px;
    font-weight: 800;
}

.gradient-text {
    background: linear-gradient(to right, #024D99, #0480FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    font-weight: 800;
}


/* Responsive */
@media (max-width: 768px) {
    .contact-header-inner {
        padding: 120px 40px;
    }

    .contact-section {
        padding: 0;
    }

    .contact-offices-section {
        padding: 40px 20px;
    }
}


/* ------------------------- CONTACT US END ------------------- */
/* ------------------------- CONTACT US MOBILE ------------------- */
@media (max-width: 768px) {

    /* PAGE HEADER */
    .contact-header-section {
        padding: 80px 20px;
        background-position: center center;
    }

    .contact-header-inner {
        padding: 100px 20px;
    }

    .contact-header-title {
        font-size: 28px;
        text-align: center;
    }

    .contact-header-subtitle {
        font-size: 16px;
    }

    .contact-card {
        width: 95%;
        /* full width with small margin */
        margin: 30px auto;
        padding: 30px 20px;
        /* smaller padding */
        border-radius: 15px;
    }

    .contact-row {
        flex-direction: column-reverse;
        /* form above image on mobile */
        min-height: auto;
        /* remove fixed height */
    }

    .contact-get-title {
        font-size: 24px;
        /* smaller heading */
        margin-bottom: 10px;
    }

    .contact-get-desc {
        font-size: 16px;
        /* smaller description text */
        margin-bottom: 15px;
    }

    .contact-form-image {
        width: 100%;
        max-height: 300px;
        /* keep image smaller */
        margin-bottom: 20px;
        border-radius: 15px;
        object-fit: cover;
    }

    /* form inputs */
    .form-control,
    .form-select,
    textarea {
        font-size: 14px;
        /* readable font size */
        padding: 8px 10px;
        /* smaller padding */
    }

    /* submit button */
    .contact-submit {
        justify-content: center;
        /* center button on mobile */
        margin-top: 20px;
    }

    .contact-btn {
        padding: 8px 16px;
        font-size: 14px;
        border-radius: 30px;
    }

    .contact-icon-container {
        width: 20px;
        height: 20px;
    }

    /* PARTNERSHIP SECTION */
    .contact-partnership-section {
        padding: 0 15px;
    }

    .contact-partnership-box {
        flex-direction: column;
        /* vertical stacking */
        align-items: center;
        padding: 15px;
        gap: 15px;
    }

    .contact-partnership-image {
        width: 100%;
        max-height: 250px;
        object-fit: cover;
        border-radius: 15px;
    }

    .contact-partnership-section h4 {
        font-size: 20px;
        /* smaller heading */
        line-height: 1.5;
        text-align: center;
    }

    .contact-person-info p {
        font-size: 14px;
        /* smaller text */
        margin-bottom: 5px;
    }

    .contact-person-name {
        font-size: 16px;
    }

    .contact-partnership-box .p-3.ps-5.pe-5 {
        padding: 10px 15px;
        /* reduce padding for mobile */
    }

    /* OPERATIONAL OFFICES */
    /* OPERATIONAL OFFICES */
    .contact-operational-section {
        padding: 30px 15px;
    }

    /* Move dropdown below the title and center */
    .contact-operational-section .d-flex.justify-content-between {
        flex-direction: column;
        /* stack vertically */
        align-items: center;
        /* center all content */
        gap: 15px;
        /* spacing between title and button */
        text-align: center;
    }

    .gradient-text {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .contact-country-btn {
        padding: 6px 20px;
        font-size: 14px;
        border-radius: 15px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .contact-flag {
        width: 16px;
        height: 12px;
        margin-right: 5px;
    }

    .contact-company-title {
        font-size: 24px;
        margin-top: 10px;
    }

    /* Office cards */
    #officeCards {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    #officeCards .badge {
        width: auto !important;
        padding: 5px 12px;
        font-size: 14px;
    }

    #officeCards .card {
        width: 100%;
        padding: 15px;
        border-radius: 15px;
    }

    #officeCards .card h6 {
        font-size: 14px;
    }

    #officeCards .card p {
        font-size: 13px;
        margin-bottom: 5px;
    }
}

/* ------------------------- CONTACT US MOBILE END ------------------- */
/* ------------------------- ABOUT CLA DESKTOP START ------------------- */

.about-header-content {
    padding: 160px 80px;
    max-width: 100%;
    overflow-x: hidden;
}

.about-header-content h1 {
    text-align: center;
}


.about-cla-box h3 {
    background: #EEC540;
    border-radius: 15px;
    color: #000;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    padding: 15px 15px;
    display: inline-block;
    margin: 0;
}

.about-history-img {
    border-radius: 20px;
    width: 100%;
    height: auto;
    padding-top: 40px;
}

.about-right-content p {
    text-align: justify;
    line-height: 2.8;
    font-size: 18px;
    color: #333;
}

.about-bg-decoration {
    position: absolute;
    opacity: 0.8;
}

.about-bg-right {
    top: 0;
    right: 0;
    width: 300px;
}

.about-bg-left {
    bottom: 0;
    left: 0;
    width: 300px;
}

/* Full Width Images */
.about-fullwidth-image {
    position: relative;
    padding: 280px 0px;
    overflow-x: hidden;
}

.about-image-one {
    background-image: url('../images/internal_assets/about12.jpg');
    background-size: cover;
    background-position: center;
}

.about-image-two {
    background-image: url('../images/internal_assets/about11.jpg');
    background-size: cover;
    background-position: center;
}


.about-milestone-images {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    overflow: hidden;
    height: 100%;
}

.about-milestone-img {
    height: auto;
    border-radius: 10px;
}

.about-milestone-img:first-child {
    width: 30%;
}

.about-milestone-img:last-child {
    width: 55%;
}

.about-section-title {
    margin-bottom: 2rem;
}

.about-highlight {
    color: #0480FF;
}

/* About Section Three - Data Privacy */
.about-section-three {
    background-color: #fff;
    overflow-x: hidden;
}

.about-data-privacy-left {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../images/internal_assets/security.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.about-data-privacy-img {
    width: 100%;
    height: 750px;
    object-fit: contain;
}

.about-data-privacy-content {
    padding: 160px 100px;
}

.about-btn-container {
    display: flex;
    justify-content: end;
    margin-top: 1rem;
    gap: 15px;
    padding: 20px 0;
}

.about-sdg-btn-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: linear-gradient(to right, #024D99, #0480FF);
    color: #fff;
    border-radius: 35px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.about-sdg-btn-blue:hover {
    background-color: #0B0088;
    border-color: #0B0088;
    color: #fff;
    text-decoration: none;
}

.about-sdg-icon-container-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #fff;
    color: #0480FF;
    border-radius: 40px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.about-sdg-btn-blue:hover .about-sdg-icon-container-blue {
    background-color: #fff;
    color: #0B0088;
    transform: translateX(2px);
}

.about-sdg-btn-blue i {
    color: #0480FF;
    font-size: 14px;
}

.about-sdg-btn-blue:hover i {
    color: #0B0088;
}

/* About Section Four - Ecosystem */
.about-ecosystem-right {
    height: 100%;
    position: relative;
    background-color: #ECF5FF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-ecosystem-img {
    width: 60%;
    height: auto;
    object-fit: contain;
}

.about-ecosystem-content {
    padding: 160px 100px;
}


/* Trends Section */
.heading-line {
    width: 550px;
    height: 7px;
    background: #eec540;
    margin-top: 10px;
}

.about-trends-section {
    position: relative;
}

.about-trends-top {
    position: relative;
    overflow: visible;
    padding-bottom: 200px;
    z-index: 1;
}

.about-trends-container {
    padding: 80px 0 30px;
    position: relative;
}

.about-trends-top p {
    text-align: justify;
    line-height: 60px;
    font-size: 20px;
    padding-top: 50px;
    color: #000;
}

.about-trends-yellow-wrap {
    position: relative;
    margin-top: -200px;
    z-index: 2;
    padding-bottom: 100px;
}

.about-trends-yellow .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.about-yellow-box {
    background: white;
    border: 5px solid #EEC540;
    border-radius: 20px;
    padding: 40px 25px;
    height: 100%;
    transition: all 0.3s ease;
}


.about-icon-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 18px;
}

.about-icon-round i {
    color: #EEC540;
}

.about-history-line {
    width: 295px !important;
    height: 7px;
    background: linear-gradient(135deg, #0B0088, #0480FF);
    margin-top: 10px;
}

.about-yellow-title {
    font-weight: 700;
    color: #EEC540;
    margin-top: 10px;
    margin-bottom: 22px;
    font-size: 25px;
}

.about-yellow-text {
    color: #000000;
    max-width: 460px;
    line-height: 2.0;
    text-align: justify;
    padding: 0 30px;
    opacity: 0.9;
    font-size: 20px;
}

/* About Section Five - What We Do */
.do-btn {
    background: transparent;
    border: 2px solid #0480FF;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 600;
    color: #0480FF;
    transition: all 0.3s ease;
}

.do-btn:hover,
.do-btn.active {
    background: #0480FF;
    color: white;
    border-color: transparent;
}

.about-what-we-do-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 25px;
    height: 100%;
    transition: all 0.3s ease;
}

.about-highlight {
    color: #0480FF;
    font-weight: 600;
}

.about-section-five {
    overflow-x: hidden;
    padding: 60px 0;
}

.about-what-we-do-card {
    border-radius: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #f2f2f2;
    height: 300px;
    transition: all 0.3s ease;
    padding: 40px 40px
}

.about-what-we-do-card i {
    color: #0A80FF;
    padding-bottom: 30px;
}

.about-what-we-do-card p {
    font-size: 18px;
}

.about-icon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* About Section Six - How We Do */
.about-section-six {
    background-color: #fff;
    overflow-x: hidden;
    padding: 100px 0;
}

.about-how-we-do-left {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 500px;
}

.about-how-we-do-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-how-we-do-list {
    padding-left: 50px;
    font-size: 20px;
    line-height: 3.0;
    color: #333;
}

.about-how-we-do-list li {
    margin-bottom: 10px;
}

/* About Section Seven - Why We Do */
.why-text {
    font-size: 24px;
    line-height: 1.6;
    color: #000;
    padding: 0 180px;
}

.about-highlight {
    color: #0480FF;
    font-weight: bold;
}

.about-section-seven {
    background-color: #fff;
    overflow-x: hidden;
}

.about-why-we-do-left {
    background: linear-gradient(90deg, #0A80FF 0%, #0B0088 100%);
}

.about-why-we-do-content {
    padding: 120px 180px;
}

.about-why-we-do-content p {
    text-align: justify;
    color: #fff;
    font-size: 20px;
    line-height: 2.7;
    margin-top: 15px;
}

.about-why-we-do-right {
    height: 100%;
    position: relative;
}

.about-why-we-do-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    padding-bottom: 30px;
}


/* About Section Eight - Motto */
.about-section-eight {
    width: 100%;
    overflow: hidden;
}


.about-motto-left {
    height: 100%;
    position: relative;
    display: flex;
}

.about-motto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.about-motto-right {
    background: linear-gradient(90deg, #0A80FF 0%, #0B0088 100%);
}

.about-motto-content {
    padding: 120px 180px;
}

.about-motto-heading {
    font-size: 30px;
    line-height: 2.7;
    margin-top: 20px;
    color: #fff;
}

.about-motto-content p {
    text-align: center;
    font-size: 24px;
    line-height: 2.7;
    margin-top: 10px;
    color: #fff;
}

.motto-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    font-size: 48px;
    gap: 3px;
}

.motto-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
    margin-right: 2px;
    vertical-align: middle;
}

.top-icon {
    width: 55px;
    height: 55px;
    display: block;
    margin-top: 10px;
}

@media (max-width: 1600px) {
    .about-motto-content {
        padding: 100px 120px;
    }
}

/* Medium desktop – still 2 columns but tighter layout */
@media (max-width: 1400px) {
    .about-motto-content {
        padding: 80px 20px;
    }
}

/* Tablet and small laptop – still side by side */
@media (max-width: 1200px) {

    .page-header-section,
    .banner-section-one,
    .contact-header-section,
    .banner-silder-one {
        padding: 120px 0;
    }

    .about-motto-content {
        padding: 60px 10px;
    }

    .about-motto-heading {
        font-size: 26px;
        line-height: 2.2;
    }

    .about-motto-content p {
        font-size: 20px;
        line-height: 2.2;
    }

    .motto-item {
        font-size: 38px;
    }

    .top-icon {
        width: 45px;
        height: 45px;
    }
}

/* When screen is too small → STACK image on top, text below */
@media (max-width: 992px) {

    .page-header-section,
    .banner-section-one,
    .contact-header-section,
    .banner-silder-one {
        padding: 60px 0;
    }

    .about-section-eight .row {
        flex-direction: column;
    }

    .about-motto-left,
    .about-motto-right {
        width: 100%;
        height: auto;
    }

    .about-motto-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .about-motto-content {
        padding: 50px 30px;
        text-align: center;
    }

    .about-data-privacy-img {
        height: 400px !important;
    }

    .about-ecosystem-img {
        height: 400px !important;
    }

    .about-image-two {
        height: 400px;
    }

    .about-fullwidth-image {
        padding: unset;
    }
}

/* Mobile screens – make text smaller */
@media (max-width: 576px) {
    .about-motto-heading {
        font-size: 22px;
    }

    .about-motto-content p {
        font-size: 18px;
        line-height: 1.8;
    }

    .motto-item {
        margin: 0 10px;
        font-size: 32px;
    }

    .top-icon {
        width: 40px;
        height: 40px;
    }
}

/* About Section Nine - Team Members */
.about-section-nine {
    background-color: #f9f9f9;
    position: relative;
    padding: 60px 0;
}

.about-leadership-box {
    padding: 5px 0;
}

.about-category-buttons {
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.about-insights-btn {
    background: #fff;
    color: #EEC540;
    border: 2px solid #EEC540;
    border-radius: 28px;
    padding: 10px 25px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.about-insights-btn:hover,
.about-insights-btn.active {
    background: #EEC540;
    color: #000;
    transform: translateY(-2px);
}

.about-team-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.about-team-img {
    height: 250px;
    object-fit: cover;
}

.about-team-info {
    text-align: center;
    padding: 20px;
}

.about-team-info h5 {
    margin: 0;
    font-size: 24px;
    color: #4c4c4c;
    font-weight: bold;
}

.about-team-info p {
    margin: 5px 0 0;
    font-size: 24px;
    color: #000;
    font-weight: bold;
}

/* About Section Ten - Endorsement */
.about-section-ten {
    background: #0B0088;
    overflow-x: hidden;
    padding: 60px 0;
}

.about-endorsement-grid {
    padding: 50px 0;
}

.about-endorse-box {
    position: relative;
    border: 8px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 40px 20px 30px 20px;
    height: 100%;
    color: #fff;
}

.about-endorse-icon-img {
    position: absolute;
    top: -50px;
    left: 20%;
    transform: translateX(-50%);
}

.about-endorse-box p {
    margin: 30px 0;
    font-size: 20px;
}

.achievements-slider {
    position: relative;
    /* padding: 0 50px; */
}

.achievements-slider .achievement-item {
    padding: 0 5px !important;
}

.achievement-item img {
    /* width: 250px; */
    width: 100%;
    height: 150px;
    object-fit: contain;
    border-radius: 10px;
    background-color: white;
    /* margin: 0 auto 10px; */
    margin: 0;
}

.achievement-item p {
    font-weight: 600;
    color: #333;
    margin: 10px 20px;
}

.achievements-slider .slick-prev,
.achievements-slider .slick-next {
    position: absolute;
    bottom: 30px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #0480FF;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.achievements-slider .slick-prev:hover,
.achievements-slider .slick-next:hover {
    background: linear-gradient(to right, #0480FF, #0B0088);
    transform: translateY(-50%) scale(1.1);
}

.achievements-slider .slick-prev {
    /* left: 80px; */
    left: 5px;
}

.achievements-slider .slick-next {
    /* right: 80px; */
    right: 5px;
}

.achievements-slider .slick-prev:before,
.achievements-slider .slick-next:before {
    content: '';
    display: none;
}

.achievements-slider .slick-prev:after {
    content: '←';
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    color: white;
    font-size: 20px;
}

.achievements-slider .slick-next:after {
    content: '→';
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    color: white;
    font-size: 20px;
}


/* ---- Dots ---- */
.slick-dots {
    position: relative;
    padding: 60px 0;
    display: flex !important;
    justify-content: center;
    gap: 10px;
    list-style: none;
}

.slick-dots li button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #636363;
    border: none;
    transition: all 0.3s ease;
    font-size: 0;
}

.slick-dots li.slick-active button {
    background: #0480FF;
    width: 30px;
    border-radius: 10px;
}


/* ------------------------- ABOUT CLA DESKTOP END ------------------- */
/* ------------------------- ABOUT CLA MOBILE START ------------------- */
@media (max-width: 1200px) {
    .about-data-privacy-left {
        height: 600px;
        padding: 20px;
    }

    .about-ecosystem-img {
        width: 100% !important;
        max-width: 400px;
        height: 600px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .about-data-privacy-img {
        width: 100% !important;
        max-width: 400px;
        height: 500px !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

@media (max-width: 768px) {
    .about-yellow-box {
        border: 3px solid #EEC540;
    }

    .about-image-two {
        height: 200px;
    }

    .achievements-section .slick-dots {
        padding-top: 30px;
        margin-bottom: 0;
    }

    .about-section-one img[alt="Right Decoration"] {
        width: 150px !important;
        /* smaller size */
        right: 0;
        top: 0;
    }

    /* About Header */
    .about-header-content {
        padding: 100px 20px !important;
    }

    .about-header-content h1 {
        font-size: 28px !important;
    }

    /* About Section One */
    .about-section-one {
        padding: 40px 0 !important;
    }

    .about-section-one .heading-title {
        font-size: 24px !important;
        line-height: 1.4;
    }

    .about-history-line {
        width: 210px !important;
        height: 8px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .about-cla-box h3 {
        padding: 8px 20px !important;
        text-align: center;
        display: block !important;
        margin: 10px 20px !important;
    }

    .about-history-img {
        padding-top: 20px !important;
    }

    .about-right-content p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        text-align: justify !important;
        padding: 0 20px !important;
    }

    .about-bg-decoration {
        width: 150px !important;
        opacity: 0.5 !important;
    }

    /* Full Width Images */
    .about-fullwidth-image {
        /* padding: 150px 0 !important; */
    }

    /* About Section Two */
    .about-section-two {
        padding: 30px 0 !important;
    }

    .about-milestone-images {
        flex-direction: column;
        gap: 20px !important;
    }

    .about-milestone-img:first-child,
    .about-milestone-img:last-child {
        width: 100% !important;
        max-width: 400px;
        margin: 0 auto;
    }

    .about-section-title h3 {
        font-size: 24px !important;
    }

    .about-section-one .heading-title {
        text-align: center;
        font-size: 24px !important;
        margin: 5px !important;
    }

    .achievements-slider {
        padding: 0 10px !important;
    }

    .achievements-slider .achievement-item {
        padding: 0 5px !important;
    }

    .achievements-slider .slick-next {
        right: 20px;
    }

    .achievements-slider .slick-prev {
        left: 20px;
    }

    /* About Section Three - Data Privacy */
    .about-section-three .row {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
    }

    .about-data-privacy-left {
        height: 300px;
        padding: 20px;
    }

    .about-data-privacy-img {
        width: 80% !important;
        max-width: 250px;
        height: 200px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .about-data-privacy-content {
        padding: 40px 15px !important;
    }

    .about-section-three .heading-title {
        font-size: 24px !important;
        margin-bottom: 15px !important;
    }

    .about-data-privacy-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .about-btn-container {
        justify-content: center !important;
        margin-top: 15px;
    }

    .about-sdg-btn-blue {
        padding: 8px 15px !important;
        font-size: 13px !important;
    }

    /* About Section Four - Ecosystem */
    .about-section-four .row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Make image column first */
    .about-ecosystem-img-col {
        order: -1 !important;
        width: 100% !important;
        padding: 15px 10px !important;
    }

    /* Text column second */
    .about-ecosystem-content-col {
        order: 1 !important;
        width: 100% !important;
        padding: 15px 10px !important;
    }

    /* Image styling */
    .about-ecosystem-img {
        width: 60% !important;
        height: 300px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Content styling */
    .about-ecosystem-content {
        padding: 40px 15px !important;
    }

    .about-section-four .heading-title {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    .about-ecosystem-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }


    .about-trends-container {
        padding: 30px 30px !important;
    }


    /* Title adjustments */
    .about-trends-section .heading-title {
        font-size: 20px !important;
    }

    /* Yellow underline */
    .about-trends-section .heading-title+div {
        width: 322px !important;
        height: 8px !important;
    }

    /* Paragraph text */
    .about-trends-top p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding-top: 15px !important;
        text-align: justify !important;
    }

    .about-trends-top {
        padding-bottom: 10px !important;
        /* adjust as needed */
    }

    /* Yellow wrap spacing */
    .about-trends-yellow-wrap {
        margin-top: -40px !important;
        padding-bottom: 40px !important;
    }

    .about-trends-yellow {
        padding: 25px 20px !important;
        border-radius: 12px !important;
    }

    /* Container fix */
    .about-trends-yellow-wrap .container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    /* Box icon circle */
    .about-icon-round {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 10px auto !important;
    }

    /* Icon inside */
    .about-icon-round img,
    .about-icon-round i {
        width: 60px !important;
    }

    /* Yellow box title */
    .about-yellow-title {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    /* Yellow box text */
    .about-yellow-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 0 10px !important;
        text-align: justify !important;
    }

    /* Stack into 1 column on mobile */
    .about-trends-yellow .col-md-4 {
        margin-bottom: 25px !important;
    }

    /* About Section Five - What We Do */
    .col-auto.d-flex.flex-wrap.gap-3.justify-content-center {
        flex-wrap: nowrap !important;
        justify-content: center;
    }

    .do-btn {
        padding: 5px 10px !important;
        font-size: 14px !important;
        flex: 0 0 auto;
    }

    .about-section-five {
        padding: 40px 0 !important;
    }

    .about-what-we-do-card {
        margin-bottom: 20px;
        height: 200px;
        padding: 30px;
    }

    .about-icon-img {
        width: 80px;
        height: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    .about-what-we-do-card i {
        font-size: 2rem !important;
        padding-bottom: 15px !important;
    }

    .about-what-we-do-card h5 {
        font-size: 18px !important;
    }

    .about-what-we-do-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* About Section Six - How We Do */
    .about-section-six {
        padding: 60px 0 !important;
    }

    .about-section-six .row {
        flex-direction: column-reverse;
    }

    .about-how-we-do-left {
        height: 300px !important;
        margin-top: 30px;
    }

    .about-how-we-do-list {
        padding-left: 20px !important;
        font-size: 16px !important;
        line-height: 2.2 !important;
    }

    .about-how-we-do-list li {
        margin-bottom: 15px !important;
    }

    /* About Section Seven - Why We Do */
    .about-section-seven .row {
        flex-direction: column;
    }

    .about-why-we-do-content {
        padding: 60px 30px !important;
    }

    .about-why-we-do-content p {
        font-size: 16px !important;
        line-height: 1.8 !important;
        text-align: left !important;
    }

    .about-why-we-do-right {
        height: 300px !important;
    }

    .why-text {
        font-size: 20px !important;
        line-height: 1.4 !important;
        padding: 0 20px !important;
        text-align: center;
    }

    #whyWeDoSection .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    #whyWeDoSection .row {
        flex-direction: column !important;
        gap: 15px;
    }

    .do-section {
        padding-bottom: 30px !important;
    }

    .col-md-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #whyWeDoSection .col-md-4>div {
        border-radius: 20px !important;
        overflow: hidden;
    }


    /* About Section Eight - Motto */
    .about-section-eight {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .about-motto-heading {
        font-size: 16px !important;
        line-height: 1.2 !important;
        word-break: break-word;
    }

    .about-motto-heading .motto-item span {
        font-size: 28px !important;
    }

    .about-motto-heading .top-icon {
        width: 30px !important;
        height: auto !important;
    }


    .about-motto-heading .motto-icon {
        width: 18px !important;
        height: auto;
        margin: 0 2px;
        margin-top: -5px;
    }

    .about-motto-content {
        padding: 20px 10px 60px !important;
    }

    .about-motto-content p {
        text-align: center !important;
        margin: 0 auto;
    }

    .motto-item:last-child .motto-icon {
        width: 22px !important;
        height: 22px;
    }


    /* About Section Nine - Team Members */
    .about-section-nine {
        padding: 40px 10px !important;
    }

    .about-leadership-box {
        padding: 5px 15px !important;
    }

    .about-section-title {
        text-align: center;
    }

    .about-category-buttons {
        justify-content: center !important;
        padding: 20px 0 !important;
        gap: 8px !important;
    }

    .about-insights-btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
        flex: 0 0 calc(50% - 8px) !important;
        text-align: center;
    }

    .about-team-card {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .team-img-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        /* keeps it square */
        overflow: hidden;
        flex-shrink: 0;
    }

    .about-team-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about-team-info {
        padding: 15px !important;
        flex-grow: 1;
        text-align: center;
    }


    .about-team-info h5 {
        font-size: 14px !important;
    }

    .about-team-info p {
        font-size: 14px !important;
    }

    .about-section-nine .heading-title+div {
        width: 155px !important;
        margin: 0 auto 0 !important;
        height: 7px !important;
    }

    /* About Section Ten - Endorsement */
    .about-section-ten {
        padding: 40px 0 !important;
    }

    .about-endorsement-grid {
        padding: 30px 0 !important;
    }

    .about-endorse-box {
        padding: 30px 15px 20px 15px !important;
        border: 3px solid rgba(255, 255, 255, 0.3);
    }

    .about-endorse-icon {
        top: -35px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 40px !important;
    }

    .about-endorse-box h5 {
        font-size: 18px !important;
    }

    .about-endorse-box p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 20px 0 !important;
        text-align: center;
    }
}

/* ------------------------- ABOUT CLA MOBILE END ------------------- */
/* ------------------------- SERVICE DESKTOP START ------------------- */

.value-chain-wrapper {
    width: 800px;
    height: 800px;
    position: relative;
    margin: 0 auto;
}

.green-lane-container {
    position: relative;
    text-align: center;
    display: inline-block;
    color: #056F23;
    padding: 0 0;
}

/* Shorter left border */
.green-lane-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 11%;
    width: 2px;
    background-color: #056F23;
}

.green-lane-container::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 11%;
    width: 2px;
    background-color: #056F23;
}

.custom-modal-height {
    height: 40vh;
}

.center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}

.center-logo h3 {
    color: white;
    font-weight: 700;
    font-size: 24px;
    margin: 0;
}

.logistics-slider {
    position: relative;
    padding: 0 50px;
}

.logistics-item img.logistics-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin: 0 auto 15px;
}

.logistics-item-wrapper {
    padding: 0 10px;
    box-sizing: border-box;
}

.logistics-slider .logistics-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 200px;
    box-sizing: border-box;
    background-color: #fff;
    padding: 40px 20px;
    border-radius: 12px;
}


.logistics-item p {
    font-size: 18px;
    color: #333;
    margin: 0;
    padding: 0 20px;
    font-weight: 500;
}

.logistics-slider .slick-prev,
.logistics-slider .slick-next {
    position: absolute;
    bottom: 30px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #0480FF;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logistics-slider .slick-prev:hover,
.logistics-slider .slick-next:hover {
    background: linear-gradient(to right, #0480FF, #0B0088);
    transform: translateY(-50%) scale(1.1);
}

.logistics-slider .slick-prev {
    left: 60px;
}

.logistics-slider .slick-next {
    right: 60px;
}

.logistics-slider .slick-prev:before,
.logistics-slider .slick-next:before {
    content: '';
    display: none;
}

.logistics-slider .slick-prev:after {
    content: '←';
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    color: white;
    font-size: 20px;
}

.logistics-slider .slick-next:after {
    content: '→';
    font-family: 'Font Awesome 6 Free';
    font-weight: bold;
    color: white;
    font-size: 20px;
}

/* Initially hide the Value Proposition section */
.value-proposition {
    display: none;
}

/* Style for active and inactive buttons */
.btn-active {
    background-color: #0480FF;
    border: none;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.btn-inactive {
    background: transparent;
    border: 1.5px solid #0480FF;
    color: #0480FF !important;
    transition: 0.3s ease;
}

.btn-inactive:hover {
    opacity: 0.9;
    background-color: #0480FF;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.btn-active:hover {
    opacity: 0.9;
    background-color: #0480FF;
    transform: translateY(-2px);
    color: #ffffff !important;
}

.map-container {
    position: relative;
}

.map-marker {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -100%);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.map-marker i {
    font-size: 22px;
    transition: transform 0.2s ease;
}

.map-marker:hover i {
    transform: scale(1.2);
}

.marker-label {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    margin-bottom: 5px;
    display: inline-block;
    white-space: nowrap;
}

.marker-label.blue {
    background-color: #0A80FF;
}

.marker-label.yellow {
    background-color: #FFCC00;
    color: #fff;
}

.map-marker.blue i {
    color: #0A80FF;
}

.map-marker.yellow i {
    color: #FFCC00;
}

.map-marker:hover .marker-label {
    filter: brightness(1.1);
}

.main-step-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(4, 128, 255, 0.3) !important;
}

.step-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: calc(25% - 18.75px);
}

.step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

.sub-step {
    transition: transform 0.3s ease, background 0.3s ease;
}

.sub-step:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.25) !important;
}

.steps-column {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sdg-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 12px;
    min-height: 120px;
    text-align: center;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.sdg-box:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.sdg-number {
    font-size: 24px;
    margin-bottom: 8px;
}

.sdg-title {
    font-size: 14px;
}

.sdg-box {
    transition: transform 0.3s;
    cursor: pointer;
}

.sdg-overlay .btn {
    opacity: 1;
    transition: opacity 0.3s;
}

.sdg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #fff;
    color: #0480FF;
    border-radius: 35px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    border: none;
    outline: none;
    cursor: pointer;
}

.sdg-btn:hover {
    background-color: #0480FF;
    color: #fff;
}

.sdg-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #0480FF;
    color: #fff;
    border-radius: 40px;
    transition: transform 0.3s ease;
}

.sdg-btn:hover .sdg-icon-container {
    background-color: #fff;
    color: #0480FF;
}

.sdg-icon {
    color: #fff;
    font-size: 14px;
}

.sdg-btn:hover .sdg-icon {
    color: #0480FF;
}

.solution-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.solution-content {
    min-height: 120px;
    display: flex;
    align-items: center;
}

.solution-overlay-btn {
    margin-bottom: 30px;
}

/* --- Modal Layout --- */
.modal-content {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

/* --- Solution Card --- */
.cla-solution-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    transition: all 0.25s ease;
}


/* --- Icon Circle --- */
.cla-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #0480FF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cla-icon i {
    color: #fff;
    font-size: 32px;
}

/* --- Product Brochure Button --- */
.cla-btn {
    background-color: #0073e6;
    color: #fff;
    font-weight: 600;
    border: 1px solid #0073e6;
    transition: all 0.3s ease;
}

.cla-btn:hover {
    background-color: #fff;
    color: #0073e6;
    border-color: #0073e6;
}

/* --- Icon Circle --- */
.cla-icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    color: #0073e6;
    transition: all 0.3s ease;
}

/* --- Icon Styling --- */
.cla-icon-circle i {
    font-size: 16px;
}

.cla-btn:hover .cla-icon-circle {
    background-color: #0073e6;
    color: #fff;
}

.cla-solution-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cla-solution-card .flex-grow-1 {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.cla-solution-card h5 {
    min-height: 60px;
    margin-bottom: 1rem !important;
}

.cla-solution-card .text-muted {
    min-height: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
}


/* floating icon */
.icon-circle {
    width: 90px;
    height: 90px;
    background-color: #0A80FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.white-box {
    background-color: #fff;
    border-radius: 16px;
    padding: 25px;
}

.key-outcome-card {
    background-color: #e9ecef;
    border-radius: 16px;
    padding: 0 30px 30px;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: all 0.3s ease;
    display: flex;
}

.key-outcome-card h4 {
    color: #0A80FF;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
}

.key-outcome-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: #0A80FF;
    text-align: center;
    height: 45px;
}

.key-outcome-card p {
    color: #333;
    font-size: 18px;
    text-align: center;
}

.key-outcome-card .top-content {
    margin-top: 40px;
}


.white-box h6 {
    position: relative;
    padding-left: 20px;
    font-weight: 700;
    margin: 0;
    color: #0A80FF;
}

.white-box h6::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #0A80FF;
    font-size: 20px;
    line-height: 1;
}

.white-box p {
    margin-left: 20px;
    margin-bottom: 0;
    text-align: left;
    color: #0A80FF;
}

.top-content {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
}

.box {
    width: 180px;
    height: 100px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #0480FF;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.circle-box {
    position: absolute;
    width: 160px;
    height: 70px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #0480FF;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ------------------------- SERVICE DESKTOP END ------------------- */
/* ------------------------- SERVICE MOBILE START ------------------- */
@media (max-width: 768px) {

    .value-section-one {
        padding-top: 30px !important;
        padding-bottom: 0 !important;
        padding-left: 20px;
        padding-right: 20px;

    }


    .value-section-one h3 {
        font-size: 24px;
    }

    .value-section-one .heading-title+div {
        width: 350px !important;
        margin: 10px auto !important;
        height: 5px !important;
    }

    .logistics-slider {
        padding: 0 10px !important;
    }

    .logistics-slider .logistics-item {
        /* padding: 20px 10px !important;
        height: 50px !important; */
    }

    .logistics-slider .slick-dots {
        padding-top: 50px;
        margin-bottom: 0;
    }

    .logistics-item img.logistics-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
    }

    .logistics-item p {
        font-size: 14px !important;
        padding: 0 2px !important;
        text-align: center;
    }

    .logistics-slider .slick-prev,
    .logistics-slider .slick-next {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
        bottom: 40px !important;
    }

    .logistics-slider .slick-prev {
        left: 20px !important;
    }

    .logistics-slider .slick-next {
        right: 20px !important;
    }

    .value-section {
        padding-top: 50px !important;
    }

    .value-section .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px;
    }

    .value-section .d-flex.gap-3.flex-wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin-top: 0 !important;
    }

    .value-section .btn {
        margin: 5px !important;
        font-size: 14px !important;
        padding: 5px 12px !important;
    }

    .why-cla-box .heading-title {
        font-size: 24px !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .value-chain-wrapper img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 15px auto !important;
    }

    .value-chain-wrapper {
        width: 100% !important;
        overflow: visible !important;
        margin-bottom: 20px !important;
        height: auto;
    }

    .value-section-three {
        padding: 50px 15px !important;
    }

    .value-section-one .slick-slide {
        /* height: 30% !important; */
    }

    .green-lane-container h3 {
        font-size: 24px !important;
        text-align: center;
        margin: 15px 0 !important;
    }

    .green-lane-container p {
        font-size: 14px !important;
        text-align: center;
        margin: 10px 0 !important;
    }

    .green-lane-container>div:first-child {
        flex-direction: row !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .green-lane-container>div:first-child>div {
        flex: 1;
        height: 2px !important;
        background-color: #056F23;
        margin: 0;
    }

    .green-lane-container>div:first-child img {
        top: -30px !important;
        /* margin: 0 !important; */
    }

    .green-lane-container img {
        top: 0 !important;
        /* margin: 0 auto !important; */
    }


    .green-lane-container::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 16%;
        width: 2px;
        background-color: #056F23;
    }

    .green-lane-container::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 16%;
        width: 2px;
        background-color: #056F23;
    }

    .green-lane-container .bottom-line-left {
        margin-top: -2px !important;
    }

    .green-lane-container .bottom-line-right {
        margin-top: -2px !important;
    }

    .scroll-container .row>div {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .scroll-container .row>div>div {
        height: 250px !important;
        width: 100% !important;
        border-radius: 20px;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    .scroll-container .row>div>div>div {
        height: 100% !important;
        padding: 20px 10px !important;
        justify-content: flex-start;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .scroll-container .row img {
        width: 35px !important;
        /* height: auto !important; */
        height: 35px !important;
        margin: 20px !important;
        flex-shrink: 0;
    }

    /* Text */
    .scroll-container .row h6 {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-top: 10px !important;
        margin-bottom: auto;
        text-align: center;
        overflow: hidden;
    }

    #before-section,
    #now-section {
        padding: 40px 15px !important;
        min-height: auto !important;
    }

    /* Heading */
    #before-section h3,
    #now-section h3 {
        font-size: 24px !important;
        text-align: center !important;
    }

    #before-section p,
    #now-section p {
        font-size: 18px !important;
        text-align: center !important;
        margin-top: 0 !important;
    }

    /* Buttons container */
    #before-section div:first-of-type,
    #now-section div:first-of-type {
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
        flex-wrap: wrap;
    }

    /* Buttons */
    #before-section div>button,
    #now-section div>button {
        padding: 8px 15px !important;
        font-size: 14px !important;
        flex: 1 1 auto;
        max-width: 150px;
        min-width: 120px;
    }

    /* Image scaling */
    #before-section img,
    #now-section img {
        width: 100% !important;
        height: auto !important;
        /* margin: 0 auto !important; */
        max-height: 380px;
    }

    .about-section-nine .row.g-4>div[col-md-3],
    .about-section-nine .row.g-4>div.col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .about-section-nine .g-4>[class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 8px;
    }

    .about-section-nine .solution-card {
        height: 240px !important;
        border-radius: 10px !important;
    }

    .about-section-nine .solution-card img {
        height: 100% !important;
        object-fit: cover !important;
    }

    .about-section-nine .solution-card .solution-title {
        font-size: 16px !important;
        line-height: 1.2 !important;
        padding: 10px 5px !important;
    }

    .about-section-nine .solution-card h3 {
        font-size: 32px !important;
        padding: 20px 0 !important;
    }

    .about-section-nine .sdg-btn {
        font-size: 12px !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
    }

    .about-section-nine h3.heading-title {
        font-size: 20px !important;
        padding: 10px 0 !important;
    }

    .modal-dialog {
        max-width: 95% !important;
        width: 95% !important;
        margin: 0 auto !important;
    }

    .modal-content {
        padding: 20px !important;
    }

    .modal-body h2 {
        font-size: 20px !important;
        padding-top: 30px;
    }

    .cla-solution-card h5 {
        font-size: 16px !important;
    }

    .cla-solution-card p {
        font-size: 14px !important;
    }

    .about-section-eleven .row>.col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 40px;
    }

    /* Reduce padding inside cards */
    .about-section-eleven .key-outcome-card {
        padding: 20px;
        min-height: auto;
    }

    .about-section-eleven {
        padding: 0 20px !important;
    }

    .icon-circle {
        width: 70px;
        height: 70px;
    }

    .about-section-eleven .icon-circle img {
        width: 40px !important;
        height: 40px !important;
    }

    .about-section-eleven h4 {
        font-size: 20px;
        padding: 0 !important;
        margin: 0 !important;
    }

    .about-section-eleven h2 {
        padding: 0 !important;
        margin: 0 !important;
    }

    .about-section-eleven h5 {
        font-size: 16px;
        padding: 0 !important;
        margin: 0 !important;
    }

    .about-section-eleven h6 {
        font-size: 14px;
    }

    .about-section-eleven p {
        font-size: 14px !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    .about-section-eleven span {
        font-size: 26px !important;
    }

    .about-section-eleven .row.align-items-center.mb-4.text-center {
        padding-bottom: 30px !important;
    }

    .mt-5 {
        margin-top: 30px !important;
    }

    .sdg-box {
        border: 2px solid #fff;
    }
}

/* ------------------------- CAREER MOBILE START------------------- */
@media (max-width: 768px) {
    .banner-section-one .banner-slide-item-one {
        height: 60vh;
        padding: 0 10px;
    }

    .banner-section-one .banner-image-one img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    .banner-section-one h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .banner-section-one h5 {
        font-size: 1rem !important;
        margin-top: 10px;
    }

    .banner-section-one .sdg-btn {
        padding: 6px 14px;
        font-size: 0.85rem;
        margin-top: 15px;
        border-radius: 25px;
    }

    /* Navigation Arrows */
    .banner-prev,
    .banner-next {
        top: 85% !important;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        font-size: 1rem;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        color: #fff;
    }

    /* Dots */
    .banner-dots {
        bottom: 50px !important;
        gap: 8px;
    }

    .banner-dot {
        width: 10px !important;
        height: 10px !important;
        border-width: 1.5px !important;
    }

    /* Container for text */
    .banner-slide-item-one .container-fluid {
        padding: 0 10px;
    }

    /* CLA ACADEMY SECTION */
    .value-section-two {
        padding: 0 15px;
        overflow-x: hidden;
    }

    .value-section-two .row {
        flex-direction: column;
        gap: 10px;
    }

    .value-section-two .col-lg-4,
    .value-section-two .col-lg-8,
    .value-section-two .col-sm-12 {
        width: 100%;
        padding: 0;
    }

    .value-section-two .animate {
        padding-top: 0 !important;
    }

    .value-section-two img {
        width: 60%;
        height: auto;
        display: block;
        margin: 0 auto;
        padding-top: 0 !important;
    }

    .about-right-one p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        text-align: justify;
        padding-top: 10px;
    }

    .value-section-two p:first-of-type {
        font-size: 16px !important;
    }

    .value-section-two p.mb-0 {
        font-size: 16px !important;
        line-height: 1.5;
        text-align: left;
        margin-top: 10px;
        padding-right: 5px;
    }

    /* CATEGORIES OF TRAINING */
    .container.mt-4.mb-5 .row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;
    }

    .container.mt-4.mb-5 .col-md-2-4 {
        flex: 0 0 250px;
        max-width: 250px;
        display: flex;
    }

    .flip-card {
        flex: 1;
        height: auto;
    }

    .flip-card-inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .flip-card-front,
    .flip-card-back {
        border-radius: 15px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .flip-card-front h2 {
        font-size: 14px;
    }

    .flip-card-back p {
        font-size: 12px;
        text-align: center;
        padding: 15px 10px;
    }

    .container.mt-4.mb-5 .row::-webkit-scrollbar {
        display: none;
    }

    .container.mt-4.mb-5 .row {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Container padding */
    #job-opening {
        padding: 40px 25px 0 25px !important;
    }

    /* Header: Jobs Opening */
    #job-opening .fs-4 {
        font-size: 24px;
        text-align: left;
        display: block;
        margin-bottom: 15px;
    }


    #job-opening .dropdown .btn {
        width: 100%;
        justify-content: flex-start;
        padding: 8px 15px;
        font-size: 14px;
        border-radius: 20px;
        margin-bottom: 20px;
    }

    #job-opening .dropdown .dropdown-menu {
        width: 100%;
    }

    #job-opening .dropdown .dropdown-item img {
        width: 18px;
        height: 12px;
        margin-right: 8px;
    }

    /* Jobs Grid */
    .jobs-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .career-card {
        width: 100%;
        margin: 0 auto;
    }

    .career-card .card {
        padding: 15px;
        border-radius: 15px;
    }

    /* Card Title and Flag */
    .career-card .card-title {
        font-size: 16px !important;
    }

    .career-card img {
        width: 25px;
        height: 18px;
        margin-right: 5px;
    }

    .career-card strong {
        font-size: 14px;
    }

    /* Job info boxes */
    .career-card .job-info-container {
        padding: 10px;
        font-size: 14px;
    }

    .career-card .job-info-container i {
        font-size: 14px;
        margin-right: 6px;
    }

    /* Discover More button */
    .career-card .sdg-btn-blue {
        width: 100%;
        justify-content: center;
        padding: 8px 0;
        font-size: 14px;
    }

    /* Pagination */
    .ajax-pagination-wrapper {
        margin-top: 20px;
        justify-content: center;
    }

    .ajax-pagination-wrapper .pagination .page-link {
        font-size: 14px;
        padding: 0.4rem 0.6rem;
    }

    .ajax-pagination-wrapper .pagination .page-link i {
        font-size: 1rem;
    }

    .col-auto.d-flex.flex-wrap.gap-3.justify-content-center.mb-5 {
        padding-left: 25px;
        padding-right: 25px;
    }

    .outcome-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .outcome-section .row.align-items-stretch {
        flex-direction: column;
        background: linear-gradient(180deg, #0480FF 0%, #0B0088 100%);
        height: auto;
        margin-left: 15px;
        margin-right: 15px;
        border-radius: 20px;
    }

    .outcome-section .col-md-6.p-0 {
        width: 100%;
        margin-bottom: 15px;
    }

    .outcome-section .col-md-6.p-0>div {
        height: auto !important;
        aspect-ratio: 1 / 1;

    }

    @media (max-width: 768px) {
        .outcome-section .col-md-6>div {
            border-radius: 20px 20px 0 0 !important;
        }
    }

    .outcome-section .col-md-6 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;

        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }


    .outcome-section .col-md-6.text-white {
        width: 100%;
        padding: 15px !important;
    }

    .outcome-section .col-md-6 p {
        font-size: 16px;
        line-height: 1.6;
    }

    .outcome-section .col-md-6 ul {
        padding-left: 15px;
        font-size: 14px;
    }

    .outcome-section .sdg-btn-white {
        width: 100%;
        justify-content: center;
        padding: 10px 0;
        font-size: 14px;
    }

    .outcome-section .sdg-icon-container-white i {
        font-size: 16px;
    }

    /* Graduates & Median Age cards */
    .country-card img {
        width: 50px;
        height: 28px;
    }

    .country-code {
        font-size: 14px !important;
        color: #0480FF;
    }

    .country-count {
        font-size: 20px !important;
        margin-left: 4px;
        font-weight: 700;
        color: #0480FF;
    }

    .value-section-one .container {
        background-size: 100% !important;
    }

    .value-section-one .flex {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .value-section-one .ms-auto.w-25 {
        width: 80% !important;
    }

    .value-section-one .ms-auto.w-25 .d-flex {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        width: 180px !important;
        height: 60px !important;
        box-sizing: border-box;
    }

    .value-section-one .ms-auto.w-25 .rounded-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .value-section-one .ms-auto.w-25 i {
        font-size: 24px !important;
    }

    .value-section-one .ms-auto.w-25 p {
        font-size: 18px !important;
    }

    .value-section-one .ms-auto.w-25 a {
        font-size: 16px !important;
    }

    .about-section-three .row.shadow-md {
        flex-direction: column;
        padding: 15px !important;
        gap: 20px;
    }

    .about-section-three .col-lg-7 {
        padding: 15px !important;
        width: 100%;
    }

    .about-section-three h4.heading-title {
        font-size: 20px !important;
    }

    .about-section-three p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .about-section-three .heading-title.mb-0 {
        font-size: 18px !important;
    }

    /* Partner Logos */
    .about-section-three .d-flex.flex-wrap img {
        height: 40px !important;
        margin-bottom: 10px;
    }


    .about-section-three .sdg-btn-blue-career {
        width: auto !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: 14px !important;
        padding: 10px 16px !important;
    }

    .about-section-three .career-btn-group {
        justify-content: center !important;
    }

    .about-section-three .col-lg-5 img {
        width: 100% !important;
        height: auto !important;
        border-radius: 0.5rem;
    }

    .about-section-three .gradient-line {
        width: 60% !important;
        height: 4px;
        margin-top: 5px;
        border-radius: 2px;
        align-items: center;
        background: linear-gradient(90deg, #0066CC 0%, #0480FF 100%);
    }

    .full-width-header.bordered-header {
        padding: 0 15px !important;
    }

    .full-width-header .back-link i {
        font-size: 16px;
    }

    .full-width-header .d-flex.justify-content-start {
        justify-content: flex-start !important;
    }


    /* Heading sizes */
    h2.fw-bold.mb-3 {
        font-size: 20px !important;
        text-align: left;
    }

    h4.fw-bold.mb-4 {
        font-size: 18px !important;
    }

    p.text-muted,
    p.text-primary {
        font-size: 14px !important;
    }

    .card.shadow-sm.p-4.bg-light {
        padding: 15px !important;
    }

    .sdg-btn-blue {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 0 !important;
        font-size: 14px !important;
    }

    .sdg-icon-container-blue {
        width: 22px !important;
        height: 22px !important;
    }

    .sdg-icon-container-blue i {
        font-size: 12px !important;
    }

    .ms-3,
    .mt-3 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}