.section-title {
    font-size: 2.8rem;
    margin-top: 30px;
  }


  .dsa-roadmap-section-main {
    max-width: 1400px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
  }

  /* Common section styling */
  .dsa-roamdpa-section {
    min-height: 200px;

  }

  /* Widths */
  .left-section,
  .right-section {
    width: 220px;
    background: #ffffff;

  }

  .middle-section {
    width: 900px;
    flex-shrink: 0;
  }

  /* ===========================
   Mobile View (Phone)
=========================== */
  @media (max-width: 768px) {

    .left-section,
    .right-section {
      display: none;
    }

    .middle-section {
      width: 100%;
    }

    .dsa-roadmap-section-main {
      padding: 10px;
    }
  }






  /* roadmap details */

  .dsa-soft-1 {
    background: linear-gradient(135deg, #e8f1ff, #dbeafe);
  }

  .dsa-soft-2 {
    background: linear-gradient(135deg, #eafaf1, #d1fae5);
  }

  .dsa-soft-3 {
    background: linear-gradient(135deg, #fff4e6, #fde68a);
  }

  .dsa-soft-4 {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  }

  .dsa-soft-5 {
    background: linear-gradient(135deg, #ffe8ec, #fecdd3);
  }

  .dsa-soft-6 {
    background: linear-gradient(135deg, #e6f7ff, #bae6fd);
  }

  .dsa-soft-7 {
    background: linear-gradient(135deg, #f0fdf4, #bbf7d0);
  }

  .dsa-soft-8 {
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
  }

  .dsa-soft-9 {
    background: linear-gradient(135deg, #eef2ff, #c7d2fe);
  }

  .dsa-soft-10 {
    background: linear-gradient(135deg, #fdf2f8, #fbcfe8);
  }

  .dsa-soft-11 {
    background: linear-gradient(135deg, #ecfeff, #a5f3fc);
  }

  .dsa-soft-12 {
    background: linear-gradient(135deg, #fefce8, #fde047);
  }

  .dsa-soft-13 {
    background: linear-gradient(135deg, #fefce8, #acff97);
  }

  .dsa-soft-14 {
    background: linear-gradient(135deg, #fefce8, #a099ff);
  }



  .dsa-roadmap-details {
    position: relative;
    padding-left: 4rem;
    margin: 0 0 0 30px;
    color: rgb(56, 55, 55);

  }

  .dsa-roadmap-details:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #9674c4;


  }

  .dsa-roadmap-details-container {
    position: relative;
    margin-bottom: 2.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(6px);
    border-radius: 5px 13px 5px 13px;
  }

  .dsa-roadmap-details-icon {
    position: absolute;
    left: -88px;
    top: 4px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    font-size: 2rem;
    background: #71738f;
  }

  .dsa-roadmap-details-icon i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .dsa-roadmap-details-body {
    /* background: linear-gradient(60deg, rgb(235, 99, 240) 0%, rgb(79, 226, 245) 100%); */
    border-radius: 12px;
    padding: 20px 20px 15px;
    box-shadow:
      0 30px 60px -12px rgba(50, 50, 93, 0.25),
      0 18px 36px -18px rgba(0, 0, 0, 0.3),
      0 -12px 36px -8px rgba(0, 0, 0, 0.025);
  }

  .dsa-roadmap-details-body:before {
    content: '';
    background: inherit;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -10px;
    transform: rotate(45deg);
    border-radius: 0 0 0 2px;
  }


  .dsa-roadmap-details-title {
    margin-bottom: 1.4rem;
    color: white;
  }


  .dsa-badge {
    background: #5f648a;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 19px;
    font-weight: bold;
  }

  .dsa-roadmap-details-body ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.5;
    font-weight: 600;
    font-size: 18px;
  }

  .dsa-roadmap-details-body li {
    font-size: 18px;
    font-weight: 500;
  }




  /* Color Variants */
  /* .dsa-roadmap-details-container.dsa-primary .dsa-badge,
  .dsa-roadmap-details-container.dsa-primary .dsa-roadmap-details-icon {
    background: #b39ddf !important;
  } */


  /* 1 */
  .dsa-badge-1,
  .dsa-roadmap-details-icon-1 {
    background: #b39ddf !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 2 */
  .dsa-badge-2,
  .dsa-roadmap-details-icon-2 {
    background: #8ecae6 !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 3 */
  .dsa-badge-3,
  .dsa-roadmap-details-icon-3 {
    background: #a7c957 !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 4 */
  .dsa-badge-4,
  .dsa-roadmap-details-icon-4 {
    background: #ffafcc !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 5 */
  .dsa-badge-5,
  .dsa-roadmap-details-icon-5 {
    background: #ffd166 !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 6 */
  .dsa-badge-6,
  .dsa-roadmap-details-icon-6 {
    background: #80ed99 !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 7 */
  .dsa-badge-7,
  .dsa-roadmap-details-icon-7 {
    background: #90dbf4 !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 8 */
  .dsa-badge-8,
  .dsa-roadmap-details-icon-8 {
    background: #cdb4db !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 9 */
  .dsa-badge-9,
  .dsa-roadmap-details-icon-9 {
    background: #ffc8dd !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 10 */
  .dsa-badge-10,
  .dsa-roadmap-details-icon-10 {
    background: #bde0fe !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 11 */
  .dsa-badge-11,
  .dsa-roadmap-details-icon-11 {
    background: #a3c4f3 !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 12 */
  .dsa-badge-12,
  .dsa-roadmap-details-icon-12 {
    background: #86fa69 !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 13 */
  .dsa-badge-13,
  .dsa-roadmap-details-icon-13 {
    background: #deb6ff !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }

  /* 14 */
  .dsa-badge-14,
  .dsa-roadmap-details-icon-14 {
    background: #ffbfec !important;
    padding: 4px 10px;
    font-size: 19px;
    font-weight: bold;
  }


  .dsa-roadmap-details-container.dsa-info .dsa-badge,
  .dsa-roadmap-details-container.dsa-info .dsa-roadmap-details-icon {
    background: #11cdef !important;
  }

  .dsa-roadmap-details-container.dsa-success .dsa-badge,
  .dsa-roadmap-details-container.dsa-success .dsa-roadmap-details-icon {
    background: #00bf9a !important;
  }

  .dsa-roadmap-details-container.dsa-warning .dsa-badge,
  .dsa-roadmap-details-container.dsa-warning .dsa-roadmap-details-icon {
    background: #ff8d72 !important;
  }

  .dsa-roadmap-details-container.dsa-danger .dsa-badge,
  .dsa-roadmap-details-container.dsa-danger .dsa-roadmap-details-icon {
    background: #fd5d93 !important;
  }

  /* ================= MOBILE ================= */
  @media (max-width: 767px) {
    .dsa-roadmap-details {
      padding-left: 1.5rem;
      margin-left: 10px;
    }

    .dsa-roadmap-details-icon {
      left: -40px;
      width: 30px;
      height: 30px;
      font-size: 1rem;
    }

    .dsa-roadmap-details-body {
      padding: 15px;
    }

    .dsa-roadmap-details-body:before {
      left: -7px;
      width: 14px;
      height: 14px;
    }

    .dsa-roadmap-details-body li {
      font-size: 15px;
      font-weight: 500;
    }



    .dsa-badge {
      font-size: 16px;
    }

    .section-title {
      font-size: 2rem;
      margin-top: 30px;
    }


  }













  /* Default hide mobile ad */
  .mobile-ad {
    display: none;
  }

  .desktop-ad {
    display: block;
  }

  /* When screen is below 1024px → show phone ad */
  @media (max-width: 1024px) {
    .desktop-ad {
      display: none;
    }

    .mobile-ad {
      display: block;
    }
  }

  /* Center ads safely */
  .responsive-ad {
    display: flex;
    justify-content: center;
    margin: 20px auto;
  }