.leaders-section {
    padding-block: 40px 80px;
}

.blogs {
    /* padding-bottom: 80px; */
}

.leaders-links {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 48px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.leaders-links::-webkit-scrollbar {
    display: none;
}

.leaders-links__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    min-width: 60px;
    flex: 0 1 auto;
    white-space: nowrap;
    transition: min-width 0.3s ease;
}

.leaders-links__item.active {
    flex: 0 0 auto;
}

.leaders-links__item span {
    display: none;
    color: var(--text-primary, #000823) !important;
}

.leaders-links__item.active span {
    display: block;
    text-align: center;
}

.leaders-links__item img {
    width: 100%;
    max-width: 60px;
    border-radius: 100%;
    object-fit: cover;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.leaders-links__item.active img {
    width: 100%;
    max-width: 60px;
    border-radius: 100%;
    opacity: 1;
    border: 3px solid var(--utility-brand-400, #294FFF);
}

/*=== Card ===*/
.leader-card {
    border-radius: 16px;
    border: 1px solid #C7E2FF;
    background: var(--bg-primary, #FFF);
    box-shadow: var(--web-gray-24-dp-2-xl-x, 0) 10px 32px var(--web-gray-24-dp-2-xl-spred, -12px) rgba(16, 24, 40, 0.05);

}

.leader-card__header {
    padding: 24px;
    border-radius: 16px 16px 0 0;
    background: var(--bg-brand-solid, #1434CB);
    min-height: 264px;
    position: relative;
    overflow: hidden;
}

.leader-card__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leader-card__meta :is(h1, .heading-1, p) {
    color: #fff
}

.leader-card__avatar {
    position: absolute;
    bottom: 0;
    right: -20px;
    width: 100%;
    max-width: 210px;
}

 
.leader-card__avatar img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
 

.leader-card__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 0 0 16px 16px;
    background: #fff;
    box-shadow: var(--web-gray-24-dp-2-xl-x, 0) 10px 32px var(--web-gray-24-dp-2-xl-spred, -12px) rgba(16, 24, 40, 0.05);
}

.leader-card__contacts,
.leader-card__info,
.leader-card__content {
    display: flex;
    flex-direction: column;
}

.leader-card__social,
.contact-item {
    display: flex;
    align-items: center;
}

.contact-item {
    gap: 16px;
}

.leader-card__social {
    align-items: center;
    gap: 24px;
    font-size: 24px;

}

.leader-card__social a {
    color: #000823 !important;
}

.leader-card__contacts {
    gap: 8px;
}

.leader-card__info {
    gap: 24px;
}

.leader-card__content {
    gap: 16px;
}

.leader-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.link-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--brand-600, #1434CB);
    font-weight: 500
}

.link-label {
    color: var(--text-primary, #1B223A);
}

.link-ref {
    color: var(--Brand-600, #1434CB);
}

.leaders-links {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.leaders-links__item {
    scroll-snap-align: center;
}

.container-custom {
    padding-inline: 24px;
}

.blog-date {
    color: var(--text-secondary, #6B7080);
}

@media (max-width: 767px) {

.leader-card__header .img-lottie{
	display: none;
}
    .blogs-wrapper.slick-initialized {
        display: block !important;
    }

    .blogs-wrapper.slick-slider .slick-track {
        display: flex !important;
    }

    .blogs-wrapper.slick-slider .slick-slide {
        height: auto !important;
    }

    .blogs-wrapper .blog-card {
        width: 312px !important;
        margin: 0 8px;
    }

    .container-custom {
        width: 100%;
        max-width: 100%;
        padding: 0 24px;
        margin: 0 auto;
    }

    .blogs {
        overflow: hidden !important;
    }

    .blogs-wrapper {
        display: flex;
    }

    .heading-4.font-400.blog-tagline {
        margin-bottom: 24px;
    }

    .blog-card {
        position: relative;
        width: 312px !important;
        max-width: 312px;
        border-radius: 16px;
        border: 1px solid #C7E2FF;
        background: #FFF;
        box-shadow: var(--web-gray-24-dp-2-xl-x, 0) 10px 32px var(--web-gray-24-dp-2-xl-spred, -12px) rgba(16, 24, 40, 0.05);
    }

    .blogs-wrapper.slick-slider {
        display: block !important;
    }

    .blog-card-header img {
        border-radius: 16px 16px 0 0;
        width: 100%;
    }

    .blog-card-body {
        border-radius: 0 0 16px 16px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .blog-topic {
        padding: 8px 20px;
        border-radius: 100px;
        border: 1px solid #99C6FF;
        max-width: fit-content;
        color: var(--Brand-600, #1434CB);
        font-feature-settings: 'cv01' on, 'cv02' on, 'cv03' on, 'cv04' on, 'cv09' on, 'cv10' on;
        font-size: var(--Font-Size-Body-L-Regular, 14px);
        font-style: normal;
        font-weight: var(--Font-Weight-normal-400, 400);
        line-height: var(--Line-Height-Body-L-Light, 18px);
        letter-spacing: var(--Letter-Spacing-Default-0, 0);
    }

    .blog-title {
        color: var(--text-primary, #000823);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: calc(20px * 2);
    }

    .desktop-blog-card {
        display: none
    }

}

/* design screen 768px and above */
@media (min-width: 768px) {

    .leaders-section {
        padding-block: 40px 24px;
    }

    .leaders-links {
        gap: 32px;
        margin-bottom: 40px;
    }

    .leader-card__header {
        min-height: 220px;
        padding: 40px;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        z-index: 1
    }

    .leader-card__header .img-lottie{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 200px;
        height: auto;
              z-index: -1
    }

 
    .leader-card__avatar {
        bottom: 0;
        right: 72px;
        max-width: 222px;
    }

    .leader-card__meta {
        gap: 12px;
    }

    .leader-card__info {
        flex-direction: row;
        justify-content: space-between;
    }

    .leader-card__contacts {
        flex-direction: row;
    }

    .leader-card__content {
        gap: 24px;
    }

    .leader-card__social,
    .leader-card__contacts {
        gap: 24px;
    }

    .contact-item {
        gap: 8px;
    }

    .leader-card__body {
        padding: 40px;
        gap: 40px;
    }

    .mobile-blogs {
        display: none;
    }

    .desktop-blog-card {
        padding: 40px;
        border-radius: 16px;
        border: 1px solid #C7E2FF;
        background: #FFF;
        box-shadow: var(--web-gray-24-dp-2-xl-x, 0) 10px 32px var(--web-gray-24-dp-2-xl-spred, -12px) rgba(16, 24, 40, 0.05);
    }

    .desktop-blog-card .separtor {
        margin-block: 32px;
        height: 1px;
        display: block;
        background: #C7E2FF;
    }

    .desktop-blog {
        display: flex;
        flex-direction: row;
        gap: 32px;
    }

    .desktop-blog img {
        border-radius: 16px;
        max-width: 199px;
    }

    .desktop-blog-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .blog-topic {
        color: #1434CB;
        border-radius: 100px;
        border: 1px solid var(--Brand-200, #99C6FF);
        padding: 8px 20px;
        max-width: fit-content;
    }

    .blog-title {
        color: var(--text-primary, #000823);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .desktop-blog:first-child {
        padding-bottom: 24px;
    }

    .desktop-blog:last-child {
        padding-top: 24px;
    }

    .desktop-blog:not(:first-child, :last-child) {
        padding-block: 24px;
    }

    .desktop-blog:not(:last-child) {
        border-bottom: 1px solid var(--Component-colors-Utility-Brand-utility-brand-100, #C7E2FF);
    }
}

/* design screen 1024px = 992px and above */
@media (min-width: 992px) {
    .leader-card__header {
        min-height: 280px;
    }

    .leader-card__avatar {
        right: 113px;
        max-width: 295px;
    }

    .container-custom {
        padding-inline: 48px;
        margin: auto
    }

    .desktop-blog-card .separtor {
        margin-block: 40px;
    }

    .leaders-links {
        justify-content: center;
    }
}

/* design screen 1366px = 1200px and above */
@media (min-width: 1200px) {
    .leaders-section {
        /* padding-block: 80px 32px; */
            padding-block: 80px 120px;
    }

    .blogs {
        /* padding-bottom: 120px; */
    }
    .leader-card {
          border-radius: 24px
    }
    .leader-card__header {
        border-radius: 24px 24px 0 0;
        min-height: 368px;
        /* max-height: 368px; */
    }
  .leader-card__header .img-lottie{
    max-width: 350px
  }
    .leader-card__body {
        border-radius: 0 0 24px 24px;
        padding: 48px;
        gap: 48px;
    }

    .leader-card__contacts {
        gap: 40px;
    }

    .contact-item {
        gap: 16px;
    }

    .leader-card__avatar {
        right: 74px;
        max-width: 420px;
    }

    .leaders-links {
        justify-content: center;
    }

    .container-custom {
        max-width: 1156px;
        padding-inline: 71px;
    }

    .desktop-blogs-list {
        padding: 48px;
    }

    .desktop-blog {
        gap: 36px;
    }

    .desktop-blog img {
        border-radius: 24px;
        max-width: 228px;
    }

    .desktop-blog:first-child {
        padding-bottom: 32px;
    }

    .desktop-blog:last-child {
        padding-top: 32px;
    }

    .desktop-blog:not(:first-child, :last-child) {
        padding-block: 32px;
    }
}

/* design screen 1920px = 1601px and above */
@media (min-width: 1601px) {
    .leaders-section {
        /* padding-block: 160px 40px; */
        padding-block: 84px 200px;
    }

    .blogs {
        /* padding-bottom: 200px; */
    }

    .leader-card__header {
        padding: 80px;
        min-height: 438px;
        /* max-height: 438px; */
    }

    .leader-card__avatar {
        right: 141px;
        max-width: 528px;
    }

    .leader-card__body {
        padding: 80px;
        gap: 64px;
    }

    .container-custom {
        max-width: 1622px;
        padding-inline: 80px;
    }

    .desktop-blogs-list {
        padding: 80px;
    }
      .leader-card__header .img-lottie{
    max-width: 438px
  }
}
/* ============= Badge CSS === */
.leader-card__content.has-badge {
    position: relative;
    padding-right: 210px;
}
.leader-card__content img.leader-badge {
    width: 182px;
    height: auto;
    position: absolute;
    right: 0;
}
@media (max-width: 1199px) {
  .leader-card__content.has-badge {
      padding-right: 160px;
  }
  .leader-card__content img.leader-badge {
      width: 136px;
  }    
}
@media (max-width: 767px) {
  .leader-card__content.has-badge {
      padding-right: 0;
  }
  .leader-card__content img.leader-badge {
      width: 122px;
      position: static;
      margin-top: 8px;
  }
}