<style>
    body {
      font-family: 'Poppins', sans-serif;
      font-color:black;
    }
    .text-gradient {
      background: linear-gradient(to right, #292f37, #444851);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .custom-carousel {
      background: #f0f1f4ff;
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.04);
      padding-bottom: 24px;
      margin: 40px auto;
      max-width: 80%;
      position: relative;
      opacity: 0.8;
    }
    .carousel-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: auto;
      min-height: 400px;
      padding: 30px 40px;
    }
    .carousel-title {
      color: #22416f;
      font-weight: 400;
      margin-bottom: 6px;
      font-size: 1.8rem;
      letter-spacing: 0.04em;
      text-align : center;
    }    
    
    .carousel-subtitle {
      color: #22416f;
      font-weight: 400;
      margin-bottom: 6px;
      font-size: 1.4rem;
      letter-spacing: 0.04em;
      text-align : center;
    }
    
    .carousel-text {
      color: #3b3b3b;
      font-size: 1.1rem;
      line-height: 1.6;
      text-align: center;
    }

    .carousel .li-text {
      color: #3b3b3b;
      font-size: 1.5rem;
      line-height: 1.6;
      text-align: left;
    }

    .carousel .li {
      list-style-type: none;
    }

    .carousel .ul .custom-list {
      list-style: none; /* hide default bullets */
      padding-left: 1.2em; /* space for new bullets */
    }

    .carousel li::before {
      content: "►"; /* custom bullet symbol */
      color: #707ae6ff; /* bullet color */
      font-weight: bold;
      display: inline-block; 
      width: 1.5em;
      margin-left: -1.2em;
      margin: right 1em;
    }

    .carousel .multi-column-list {
      columns: 2;         
      column-gap: 10px;   
      color: #3b3b3b;
      list-style-position: inside; 
      font-size: 1rem;
      line-height: 1.6;
      margin-top: 10px;
    }

    .custom-control .carousel-control-prev-icon, .custom-control .carousel-control-next-icon {
      background-color: #22416f;
      border-radius: 50%;
      opacity: 0.95;
      width: 2.5rem;
      height: 2.5rem;
    }

    .carousel-indicators [data-bs-target] {
      background-color: #22416f;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      opacity: 0.45;
      transition: opacity 0.2s;
      margin-top:40px;

    }

    .carousel-indicators .active {
      opacity: 1;
      margin-top:40px;

    }
    @media (max-width: 600px) {
      .carousel-content {
        padding: 18px 10px;
        height: auto;
      }
      .carousel-title {
        font-size: 1.3rem;
      }
      .custom-carousel {
        max-width: 98vw;
        padding-bottom: 8px;
      }

    
    }

    /* Timeline style for connecting lines between consultant cards */
    .timeline-cards {
        position: relative;
    }
    .timeline-card {
        position: relative;
        background-clip: padding-box;
        margin-bottom:2%;
    }
    .timeline-card::before {
        content: "";
        position: absolute;
        left: 30px; /* line position (adjust if needed) */
        top: 0;
        bottom: 0;
        width: 3px;
        background: #545352ff;
        opacity: 0.15;
        z-index: 1;
    }
    .timeline-card.timeline-card-first::before {
        top: 50%;
    }
    .timeline-card.timeline-card-last::before {
        bottom: 50%;
    }
    .timeline-card:not(.timeline-card-first) {
        margin-top: -20px; /* Connects cards even closer */
    }
    @media (max-width: 767px) {
        .timeline-card::before,
        .timeline-cards::before {
        left: 16px;
        }
    }

    .timeline-card .card-body {
        position: relative;
        z-index: 2;
        /* Add a left margin to not overlap the line; adjust as needed */
    }

    .timeline-card .card-title {
        margin-left: 18px;
        margin-top:1%;
        position: relative;
        color: #04044fff;
        font-weight:200;
        font-size:1.5em;
        align-items:center; 
        text-align:center;
    }

    /* Optional: Add a dot at each card for stronger visual effect */
    .timeline-card .card-title::before {
        content: "";
        display: inline-block;
        position: absolute;
        left: -10px;
        top: 0px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #22416f;
        opacity: 0.48;
        border: 2px solid #fff;
        z-index: 3;
    }

    /* Remove dot from main consultant card if desired */
    .timeline-card-first .card-title::before {
        background: #22416f;
        opacity: 0.85;
        width: 18px;
        height: 18px;
        left: -32px;
        top: 4px;
    }

    .timeline-card-last::before {
        /* No special styling needed - handled above */
    }

    .consultant-text{
        text-align:justify;
        margin-left:5%;
        margin-right:5%;
    }

    .consultant-listitems{
        margin-left:25%;
        margin-bottom:2%;
        text-align:left;
        line-height:2em;
    }

    @media (max-width: 575px) {
        .timeline-card .card-title::before {
        left: -18px;
        width: 10px;
        height: 10px;
        top: 6px;
        }
        .timeline-card-first .card-title::before {
        left: -22px;
        width: 14px;
        height: 14px;
        top: 2px;
        }
    }

</style>
