/* About Founder Leadership pages styles */
.inner-banner-section {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
}

body .inner-banner-section:first-child {
  margin-top: 0;
}

.banner-image-wrap {
    position: relative;
    height: 100%;
    width: 100%;
}

.banner-image {
    position: relative;
    height: 100%;
    width: 100%;
}

.banner-image .filter-sat {
  -webkit-animation: unset;
  animation: unset;
}

.banner-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(24, 43, 50, 0.4);
}

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

.banner-image-content {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    text-align: center;
    padding-block-end: 40px;
}

.banner-image-content h1 {
    font-family: "gilroysemibold";
    font-size: 50px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

/* inner-page-header-transparent style */
.inner-page-header-transparent header .navbar,
.inner-page-header-transparent header.to-top {
  position: fixed;
  top: -1px;
}

.light-pink-bg {
    background-color: #FAE5D3;
}

/* vision-story-section */
.vision-story-section {
    padding: 54px 0 60px;
}

.vision-story-section .vision-list#counterMain li:nth-last-child(-n+3) {
  margin-bottom: 0;
}

/* learn-more style */
.learn-more {
    text-transform: uppercase;
    line-height: 1.4;
    position: relative;
    margin-block-start: 10px;
    display: inline-block;
    font-size: 14px;
}

.learn-more::before {
  content: '';
  width: 100%;
  height: 1px;
  background: #fff;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width .75s ease;
}

.learn-more:hover::before {
  width: 0%;
}

/* diversified-legacy-section style */
.diversified-legacy-section {
    position: relative;
    padding: 54px 0 60px;
}

.diversified-legacy-slider {
    margin-block-start: 20px;
    position: relative;
    display: none;
}

.diversified-legacy-slider-items {
    position: relative;
    margin: 30px 15px;
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
}

.diversified-legacy-slider-items:hover,
.diversified-legacy-slider-items:focus-visible {
    color: #fff;
}

.diversified-legacy-slider-img,
.diversified-legacy-slide-icon-slider-img {
    position: relative;
    display: block;
}

.diversified-legacy-slider-img img,
.diversified-legacy-slide-icon-slider-img img {
    width: 100%;
    object-fit: cover;
}

.diversified-legacy-slider-img::after,
.diversified-legacy-slide-icon-slider-img::after {
    content: '';
    background: linear-gradient( 180deg, rgba(24, 43, 50, 0) 0%, rgba(24, 43, 50, 1) 100% );
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    z-index: 1;
    width: 100%;
    height: 50%;
}

.diversified-legacy-slider-content,
.diversified-legacy-slide-icon-slider-content {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 16px;
    transition: 0.4s ease-in-out; 
    transform: translateY(calc(100% - 72px));
    font-size: 16px;
}

.diversified-legacy-slider-content h3,
.diversified-legacy-slide-icon-slider-content h3 {
    font-family: "gilroymedium";
    font-size: 24px;
}

.diversified-legacy-slide-icon-slider {
    position: relative;
    /* box-shadow: 0 0 14px rgba(0, 0, 0, 0.4); */
}

.diversified-legacy-slide-icon-slider-content p {
    color: #fff;
    font-size: 17px;
    line-height: 1.5;
}

.diversified-legacy-slide-icon-slider-items {
    position: relative;
    color: #fff;
    margin: 15px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
}

.diversified-legacy-slide-icon-slider-items:hover,
.diversified-legacy-slide-icon-slider-items:focus-visible {
    color: #fff;
}

.diversified-legacy-slide-icon-thumbnails {
    margin-block-start: 20px;
    margin-inline: auto;
    max-width: 920px;
}

.diversified-legacy-slide-icon-thumbnails-img {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: 0.4s ease-in-out;
}

.diversified-legacy-slide-icon-thumbnails-img img {
    max-width: 40px;
    max-height: 40px;
    min-height: 40px;
    object-fit: contain;
}

.diversified-legacy-slide-icon-thumbnails .slick-slide {
    padding: 10px;
    transition: 0.4s ease-in-out;
    text-align: center;
}

.diversified-legacy-slide-icon-thumbnails .slick-track {
    transform: translate3d(0, 0, 0) !important;
}

.slick-slide.slick-current .diversified-legacy-slide-icon-thumbnails-img {
    background-color: #F48129;
}

.slick-slide.slick-current .diversified-legacy-slide-icon-thumbnails-img img {
    filter: brightness(0) invert(1);
}

.diversified-legacy-slide-icon {
    position: relative;
    /* display: none; */
    margin-block-start: 30px;
}

.diversified-legacy-slider-content p {
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
}

.diversified-legacy-slider-content-hoverable,
.diversified-legacy-slider-icon-content-hoverable {
    transition: 0.4s ease-in-out; 
    opacity: 0;   
}

.diversified-legacy-slider-items:hover .diversified-legacy-slider-content,
.diversified-legacy-slide-icon-slider-items:hover .diversified-legacy-slide-icon-slider-content {
    transform: translateY(0);
}

.diversified-legacy-slider-items:hover .diversified-legacy-slider-content-hoverable,
.diversified-legacy-slide-icon-slider-items:hover .diversified-legacy-slider-icon-content-hoverable {
    opacity: 1; 
}

.diversified-legacy-slider .slick-dots {
    margin-block-start: 10px;
}

.honouring-legacy-slider .slick-arrow,
.employee-slider .slick-arrow,
.diversified-legacy-slider .slick-arrow,
.diversified-legacy-slide-icon-slider .slick-arrow {
    background-color: #fff;
    border: 0 none;
    border-radius: 50%;
    padding: 8px;
    font-size: 0;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    background-image: url('../img/slide-next-icon.png');
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: 14px auto;
    position: absolute;
    inset-block-start: calc(50% - 15px);
    z-index: 3;
    margin-block-start: -25px;
}

.diversified-legacy-slide-icon-slider .slick-arrow {
  inset-block-start: 50%;
}

.honouring-legacy-slider .slick-arrow::before,
.employee-slider .slick-arrow::before,
.diversified-legacy-slider .slick-arrow::before,
.diversified-legacy-slide-icon-slider .slick-arrow::before {
    display: none;
}

.honouring-legacy-slider .slick-prev.slick-disabled,
.diversified-legacy-slider .slick-prev.slick-disabled,
.diversified-legacy-slide-icon-slider .slick-prev.slick-disabled {
    background-image: url('../img/slide-disable-prev-icon.png');
    background-position: 15px center;
}

.honouring-legacy-slider .slick-next.slick-disabled,
.diversified-legacy-slider .slick-next.slick-disabled,
.diversified-legacy-slide-icon-slider .slick-next.slick-disabled {
    background-image: url('../img/slide-disable-next-icon.png');
}

.diversified-legacy-slider .slick-arrow:hover,
.diversified-legacy-slider .slick-arrow:focus-visible,
.diversified-legacy-slide-icon-slider .slick-arrow:hover,
.diversified-legacy-slide-icon-slider .slick-arrow:focus-visible {
    box-shadow: 0 0 20px rgba(0,0,0,0.35);
}

.diversified-legacy-slider .slick-arrow.slick-disabled:hover,
.diversified-legacy-slider .slick-arrow.slick-disabled:focus-visible,
.diversified-legacy-slide-icon-slider .slick-arrow.slick-disabled:hover,
.diversified-legacy-slide-icon-slider .slick-arrow.slick-disabled:focus-visible {
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    cursor: no-drop;
}

.honouring-legacy-slider .slick-prev,
.employee-slider .slick-prev,
.diversified-legacy-slider .slick-prev,
.diversified-legacy-slide-icon-slider .slick-prev {
    inset-inline-start: -12px;
    background-image: url('../img/slide-prev-icon.png');
    background-position: 15px center;
}

.honouring-legacy-slider .slick-prev {
    inset-inline-start: 20px;
}

.diversified-legacy-slider .slick-next,
.diversified-legacy-slide-icon-slider .slick-next {
    inset-inline-end: -12px;
}

.honouring-legacy-slider .slick-next {
    inset-inline-end: 20px;
}

.employee-slider .slick-arrow {
    inset-block-start: auto;
    inset-block-end: 0;
    margin-block-start: 0;
}

.employee-slider .slick-prev {
    inset-inline-start: calc(50% - 60px);
}

.employee-slider .slick-next {
    inset-inline-end: calc(50% - 60px);
}

.image-background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

.image-background + .container {
    position: relative;
    z-index: 3;
}

/* our-value-section */
.our-value-section {
    position: relative;
    background-color: #182B32;
    color: #fff;
}

.our-value-section .section-title h2,
.our-value-section .section-inner p {
    color: #fff;
}

.our-value-media {
    text-align: center;
}

/* Guiding Principle */
.guiding-principle-section {
    background-color: #E87C21;
    color: #fff;
    padding-block: 54px 60px;
    position: relative;
}

.guiding-principle-section h2 {
    color: #fff;
    margin-block-end: 30px;
}

.guiding-principle-slider {
    margin-top: 60px;
}

.guiding-principle-slider-items {
    padding-inline: 10px;
}

.guiding-principle-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.guiding-principle-thumb {
    margin-bottom: 20px;
    width: 120px;
    height: 120px;
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guiding-principle-thumb img {
    max-width: 60px;
}

.guiding-principle-slider-items h3 {
    font-family: 'gilroymedium';
    font-size: 20px;
}

.guiding-principle-slider-items p {
    font-size: 16px;
    color: #fff;
}

.guiding-principle-slider .slick-dots {
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-block-start: 30px;
}

.guiding-principle-slider .slick-dots li {
    width: 20px;
    height: 20px;
}

.guiding-principle-slider .slick-dots button {
    width: 16px;
    height: 16px;
    border: solid 1px #fff;
    border-radius: 50%;
    background-color: transparent;
    font-size: 0;
    padding: 0;
    display: block;
}

.guiding-principle-slider .slick-dots .slick-active button {
    background-color: #fff;
}

.guiding-principle-main {
    display: flex;
    flex-wrap: wrap;
}

.guiding-principle-left {
    width: 70%;
}

.guiding-principle-right {
    width: 30%;
    padding-left: 36px;
}

.guiding-principle-left-card,
.guiding-principle-right-card {
    padding: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 434px;
}

.guiding-principle-left-card {
    background-color: #fff;
    color: #333333;
    padding-right: 260px;
}

.guiding-principle-right-card {
    background-color: transparent;
    color: #fff;
    border: solid 1px #fff;
    align-items: flex-end;
}

.guiding-principle-left-card h3,
.guiding-principle-right-card h3 {
    font-family: 'gilroymedium';
    font-size: 24px;
}

.guiding-principle-right-card h3 {
    margin-bottom: 0;
}

.guiding-principle-left-card img,
.guiding-principle-right-card img {
    position: absolute;
    top: 0;
    z-index: 1;
}

.bcm-group-mark {
    display: block;
}

.bcm-group-mark-mobile {
    display: none;
}

.guiding-principle-left-card img {
    right: 0;
}

.guiding-principle-right-card img {
    left: 0;
}

.guiding-principle-left-card > *,
.guiding-principle-right-card > * {
    position: relative;
    z-index: 3;
}

.guiding-principle-slider-main {
    padding-top: 60px;
}

.guiding-principle-slider-main h3 {
    font-family: 'gilroymedium';
    font-size: 30px;
    text-align: center;
    margin-bottom: 0;
}

/* beyound-business-section */
.beyound-business-section {
    position: relative;
}

.custom-btn {
  padding: 16px 40px;
}

.custom-btn:hover::before {
  transform: scale(0.999);
}

.custom-btn-group {
    text-align: center;
}

.custom-btn-pink {
    background-color: #f5822a;
    border-color: #f5822a;
    color: #fff;
}

.custom-btn-pink:hover {
    color: #f5822a;
}

.custom-btn-pink::before {
    background: #fff;
}

/* our-leadership-section */
.our-leadership-section {
    position: relative;
    background-color: #FAE5D3;
}

.our-leadership-media {
    margin-bottom: 30px;
}

.our-leadership-media img {
    max-width: 100%;
    width: 100%;
}

.our-leadership-content {
    margin-bottom: 30px;
}

.our-leadership-content p {
    text-align: center;
}

.csr-project .left-sec h3 {
  font-family: 'gilroymedium';
}

/* csr-fonder-section */
.csr-fonder-section {
    position: relative;
}

.csr-about-section .left-sec p:not(:last-child),
.csr-fonder-section .left-sec p:not(:last-child) {
    margin-bottom: 20px;
}

.csr-fonder-section .sub-title:has(.icon-quote) {
    font-style: italic;
}

.csr-fonder-section .csr-project .left-sec:has(h4) h3 {
    margin-bottom: 6px;
}

.csr-fonder-section .csr-project .left-sec h4 {
    margin-bottom: 30px;
    font-size: 20px;
}

.csr-fonder-section .sub-title .icon-quote {
    margin-bottom: 0;
    margin-right: 10px;
}

.csr-fonder-section .sub-title .icon-quote img {
    width: auto;
}

.csr-fonder-section .csr-project .left-sec {
    width: 60%;
}

.csr-fonder-section .csr-project .right-sec {
    width: 48%;
}

/* honouring-legacy-section */
.honouring-legacy-section {
    position: relative;
}

.honouring-legacy-main {
    padding-inline: 145px;
}

.honouring-legacy-main p {
    text-align: center;
}

.honouring-legacy-main p:not(:last-child) {
    margin-bottom: 20px;
}

.honouring-legacy-main a {
    color: #F48129;
}

.honouring-legacy-main a:hover {
    color: #F48129;
}

.honouring-legacy-slider {
    margin-bottom: 30px;
}

.honouring-legacy-slider-items img {
    width: 100%;
}

/* our-director-section */
.our-director-section {
    position: relative;
    background-color: #E87C21;
    color: #fff;
}

.our-director-section p,
.our-director-section .section-title h2{
    color: #fff;
}

.section-title .sub-title {
  max-width: 100%;
}

.our-director-section .section-title .sub-title {
    text-align: center;
}

.our-director-main {
    margin-top: 40px;
    position: relative;
}

.employee-slider-items {
    padding-inline: 16px;
}

.employee-card {
    position: relative;
}

.employee-card > img {
    width: 100%;
}

.employee-card-content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    padding: 50px 20px 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.employee-card-info h3 {
    margin-bottom: 0;
    font-family: 'gilroysemibold';
    font-size: 28px;
}

.employee-card-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.employee-card-social li a {
    border: solid 1px #fff;
    color: #fff;
    border-radius: 50%;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
} 

.employee-card-social li a svg {
    fill: #fff; 
} 

.employee-card-social li a:hover,
.employee-card-social li a:focus-visible {
    color: #f5822a;
    border-color: #f5822a;
}

.employee-card-social li a:hover svg,
.employee-card-social li a:focus-visible svg {
    fill: #f5822a;
}

/* bcm-marg-section */
.bcm-marg-section {
    position: relative;
    background-color: #FAE5D3;
} 

.bcm-marg-media {
    margin-bottom: 30px;
}

.bcm-marg-main p {
    text-align: center;
}

/* philosophy-section */
.philosophy-section {
    position: relative;
    background-color: #FAE5D3;
}

.philosophy-main {
    padding-inline: 172px;
    position: relative;
    text-align: center;
}

.quote-para {
    font-family: 'gilroymedium';
    font-style: italic;
    display: flex;
    gap: 8px;
    font-size: 26px;
}

.icon-quote {
    display: inline-block;
    min-width: 50px;
}

.philosophy-main h4 {
    margin: 36px 0 0;
    font-size: 20px;
}

/* guided-value-section */
.guided-value-section {
    position: relative;
}

.guided-value-media {
    margin-bottom: 30px;
}

.guided-value-main p {
    text-align: center;
}

.guided-value-main p:not(:last-child) {
    margin-bottom: 20px;
}

/* csr-legacy-section */
.csr-legacy-section {
    position: relative;
    background-color: #E87C21;
    color: #fff;
}

.csr-legacy-section p,
.csr-legacy-section h2 {
    color: #fff;
}

.csr-legacy-section .csr-project .left-sec {
    background-color: #fff;
    color: #182b32;
    order: 2;
}

.csr-legacy-section .csr-project .left-sec p {
    color: #182b32;
}

.csr-legacy-section .csr-project .right-sec {
    order: 1;
    margin-inline: 0 -115px;
}

.csr-legacy-section .csr-project .left-sec a,
.csr-legacy-section .csr-project .left-sec a:hover,
.csr-legacy-section .csr-project .left-sec a:focus-visible,
.csr-fonder-section .section-title a,
.csr-fonder-section .section-title a:hover,
.csr-fonder-section .section-title a:focus-visible {
    color: #E87C21;
}


/* --- Expandable Vision & Mission Cards (Desktop & Mobile) --- */
.guiding-principle-left,
.guiding-principle-right {
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    cursor: pointer;
}

.guiding-principle-left-card,
.guiding-principle-right-card {
    transition: padding 0.5s ease-in-out, min-height 0.5s ease-in-out;
    overflow: hidden; 
    height: 100%;
}

.guiding-principle-left-card img,
.guiding-principle-right-card img {
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* --- HIDE CONTENT WHEN SHRUNK (Global: Desktop & Mobile) --- */
.guiding-principle-left.shrunk .guiding-principle-left-card p,
.guiding-principle-left.shrunk .guiding-principle-left-card ul,
.guiding-principle-right.shrunk .guiding-principle-right-card p,
.guiding-principle-right.shrunk .guiding-principle-right-card ul {
    display: none !important; /* Hides the content */
}

/* Remove bottom margin from heading when shrunk to keep it vertically centered */
.guiding-principle-left.shrunk .guiding-principle-left-card h3,
.guiding-principle-right.shrunk .guiding-principle-right-card h3 {
    margin-bottom: 0 !important;
}

/* Styling for the new Mission List */
.guiding-principle-right-card ul {
    padding-left: 20px;
    margin-top: 10px;
    color: #fff;
}
.guiding-principle-right-card ul li {
    margin-bottom: 8px;
    font-size: 16px;
}

.guiding-principle-right-card {
    align-items: flex-start !important; /* Overrides the original flex-end/center */
    text-align: left !important;
}

.guiding-principle-right-card h3,
.guiding-principle-right-card p,
.guiding-principle-right-card ul,
.guiding-principle-right-card ul li {
    color: #ffffff !important;
    text-align: left !important;
}

/* Read More & Scrollable Container Styles */
.content-scroll-container {
    overflow-y: hidden;
    padding-right: 10px; 
}

.content-scroll-container.expanded {
    overflow-y: auto;
}

/* Custom Scrollbar */
.content-scroll-container::-webkit-scrollbar {
    width: 5px;
}

.content-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); 
    border-radius: 4px;
}

.content-scroll-container::-webkit-scrollbar-thumb {
    background: #fff; /* Changed to dark slate for better contrast */
    border-radius: 4px;
}

.content-scroll-container-black::-webkit-scrollbar-thumb {
    background: black; /* Changed to dark slate for better contrast */
    border-radius: 4px;
}

/* Button & Arrow Styles */
.read-more-btn {
    background: transparent;
    color: #fff; /* Changed to dark slate for better contrast */
    border: none;
    padding: 0;
    font-family: 'gilroysemibold', sans-serif;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Adds space between text and arrow */
    transition: 0.3s ease-in-out;
}

.read-more-btn:hover, 
.read-more-btn:focus-visible {
    color: #f1f1f1;;
}

.toggle-arrow {
    width: 12px; /* Adjust size if needed */
    transition: transform 0.3s ease-in-out;
    color: #fff;
}

/* Rotates the arrow when expanded */
.read-more-btn.expanded .toggle-arrow {
    transform: rotate(180deg);
}

/* Image hide/show */
.img-desktop,
.slick-slide img.img-desktop {
    display: block;
}

.img-ipad,
.img-mobile,
.slick-slide img.img-ipad,
.slick-slide img.img-mobile {
    display: none;
}

/*------------------------------------------------*/
  
/* Media query */
@media only screen and (max-width: 1600px) {
  .csr-project .left-sec p {
    font-size: 15px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .vision-story-section,
    .diversified-legacy-section,
    .guiding-principle-section {
        padding: 60px 0;
    }
}

@media only screen and (max-width: 1599px) {
    .philosophy-main {
        padding-inline: 110px;
    }

    .quote-para {
        font-size: 20px;
    }

    .philosophy-main h4 {
        margin-top: 24px;
    }

    .honouring-legacy-main {
        padding-inline: 0;
    }

    .employee-card-info h3 {
        font-size: 26px;
    }
}

@media only screen and (max-width: 1399px) {
    .philosophy-main {
        padding-inline: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .csr-fonder-section .csr-project .left-sec h4 {
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .vision-story-section,
    .diversified-legacy-section,
    .guiding-principle-section {
        padding: 60px 0;
    }
}

@media only screen and (max-width: 1023px) {
    .csr-fonder-section .csr-project .right-sec {
        width: 80%;
    }

    .employee-card-info h3 {
        font-size: 24px;
    }

    .csr-legacy-section .csr-project .right-sec {
        margin-inline: auto;
        order: unset;
    }

    .csr-legacy-section .csr-project .left-sec {
        order: unset;
    }
}

@media (min-width: 600px) and (max-width: 991px) {
    .vision-story-section,
    .diversified-legacy-section,
    .guiding-principle-section {
        padding: 50px 0;
    }

    .inner-banner-section {
        min-height: calc(100vh - 60px);
        height: calc(100vh - 60px);
    }
}

/* -- Desktop View (Horizontal Animation) -- */
@media only screen and (min-width: 992px) {
    .guiding-principle-left.expanded,
    .guiding-principle-right.expanded { width: 70%; }
    
    .guiding-principle-left.shrunk,
    .guiding-principle-right.shrunk { width: 30%; }
    
    .guiding-principle-left.shrunk .guiding-principle-left-card { padding-right: 30px; }
}

/* -- Mobile View (Vertical Animation) -- */
@media only screen and (max-width: 991px) {
    .diversified-legacy-section .section-inner p {
        text-align: justify;
    }

    .diversified-legacy-slider .slick-prev,
    .diversified-legacy-slide-icon-slider .slick-prev {
        inset-inline-start: 0;
    }

    .diversified-legacy-slider .slick-next,
    .diversified-legacy-slide-icon-slider .slick-next {
        inset-inline-end: 0;
    }

    .diversified-legacy-slider .slick-dots {
        padding-inline: 60px;
    }

    .guiding-principle-left {
        width: 100%;
    }

    .guiding-principle-right {
        width: 100%;
        padding-left: 0;
        padding-top: 24px;
    }

    .guiding-principle-left-card {
        padding-right: 30px;
        padding-bottom: 200px;
        text-align: center;
    }

    .bcm-group-mark {
        display: none;
    }

    .bcm-group-mark-mobile {
        display: block;
    }

    .guiding-principle-left-card img {
        right: 0;
        left: 0;
        width: 100%;
        top: auto;
        bottom: 0;
        max-height: 182px;
    }

    .guiding-principle-right-card {
        align-items: center;
        min-height: 275px;
    }

    .guiding-principle-right-card img {
        left: 0;
        right: 0;
        width: 100%;
        max-height: 182px;
    }

    .quote-para {
        font-size: 18px;
    }  

    .philosophy-main h4 {
        margin-top: 20px;
    }

    .employee-slider-items {
        padding-inline: 10px;
    }

    .csr-legacy-section .csr-project .left-sec {
        order: 2;
    }

    .csr-legacy-section .csr-project .right-sec {
        order: 1;
    }

    .guiding-principle-main {
        display: flex !important;
        flex-direction: column !important; /* Forces vertical stacking */
        flex-wrap: nowrap !important;
        height: 700px !important; /* Fixed height to allow percentage animation */
        gap: 15px; /* Adds a small gap between the stacked cards */
    }
    
    .guiding-principle-left,
    .guiding-principle-right {
        width: 100% !important; /* Forces full width */
        padding: 0 !important; /* Resets any conflicting padding */
    }
    
    /* Toggle heights instead of width */
    .guiding-principle-left.expanded,
    .guiding-principle-right.expanded { height: 75% !important; }
    
    .guiding-principle-left.shrunk,
    .guiding-principle-right.shrunk { height: 25% !important; }
    
    /* Fix inner card heights and centering */
    .guiding-principle-left-card,
    .guiding-principle-right-card { 
        min-height: 0 !important; 
        padding-bottom: 20px !important; 
        justify-content: center !important; 
    }
    
    /* Handle background images so they don't break the container */
    .guiding-principle-left.expanded .guiding-principle-left-card img,
    .guiding-principle-right.expanded .guiding-principle-right-card img { 
        max-height: 150px !important; 
        opacity: 1 !important; 
    }
    
    .guiding-principle-left.shrunk .guiding-principle-left-card img,
    .guiding-principle-right.shrunk .guiding-principle-right-card img { 
        max-height: 80px !important; 
        opacity: 0.15 !important; /* Fades out the globe logo slightly when inactive */
    }

    /* Image hide/show */
    .img-ipad,
    .slick-slide img.img-ipad {
        display: block;
    }

    .img-desktop,
    .img-mobile,
    .slick-slide img.img-desktop,
    .slick-slide img.img-mobile {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .vision-story-section,
    .diversified-legacy-section,
    .guiding-principle-section {
        padding: 30px 0;
    }

    .vision-story-section .vision-list#counterMain li:nth-last-child(-n+3) {
        margin-bottom: 20px;
    }

    .beyound-business-section .custom-btn,
    .our-leadership-section .custom-btn {
        padding: 16px 24px;
    }

    .guiding-principle-slider {
        margin-top: 30px;
    }

    .guiding-principle-slider-main {
        padding-top: 40px;
    }

    .csr-fonder-section .csr-project .left-sec h4 {
        margin-bottom: 20px;
    }

    .csr-fonder-section .csr-project .right-sec {
        width: 100%;
    }

    .csr-fonder-section .csr-project .left-sec {
        width: 90%;
    }

    .employee-slider,
    .honouring-legacy-slider {
        padding-bottom: 84px;
    } 

    .employee-slider-items {
        padding-inline: 3px;
    }

    .honouring-legacy-slider .slick-arrow {
        inset-block-start: auto;
        inset-block-end: 0;
        margin-block-start: 0;
    }

    .honouring-legacy-slider .slick-prev {
        inset-inline-start: calc(50% - 60px);
    }

    .honouring-legacy-slider .slick-next {
        inset-inline-end: calc(50% - 60px);
    }

    .banner-image-content h1 {
        font-size: 30px;
    }

    .csr-project .left-sec p {
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {
    .inner-banner-section {
        min-height: calc(100vh - 58px);
        height: calc(100vh - 58px);
    }

    .diversified-legacy-slider-content {
        transform: unset;
    }

    .diversified-legacy-slider-content-hoverable,
    .diversified-legacy-slider-icon-content-hoverable {
        opacity: 1;
    }

    .diversified-legacy-slider-items {
        margin: 0 0 30px;
        box-shadow: none;
    }

    .diversified-legacy-slide-icon {
        display: block;
    }

    .diversified-legacy-slide-icon-slider-content {
        transform: unset;
    }

    .diversified-legacy-slide-icon-thumbnails-item p {
        font-size: 11.9px;
        word-break: break-all;
        text-wrap: balance;
    }

    .diversified-legacy-slide-icon-slider .slick-arrow {
        display: none !important;
    }

    .diversified-legacy-slide-icon-thumbnails .slick-slide {
        padding: 10px 0;
    }

    .beyound-business-section .custom-btn,
    .our-leadership-section .custom-btn {
        font-size: 13px;
    }

    .philosophy-main h4 {
        font-size: 14px;
        max-width: 70%;
        margin-inline: auto;
    }

    .quote-para {
        display: block;
        gap: 0;
    }

    .icon-quote {
        max-width: 40px;
        margin-right: 10px;
    }

    /* Image hide/show */
    .img-mobile,
    .slick-slide img.img-mobile {
        display: block;
    }

    .img-desktop,
    .img-ipad,
    .slick-slide img.img-desktop,
    .slick-slide img.img-ipad {
        display: none;
    }
}