main {
    --light-bg: #F5F6FF;
    --light-bg-2: #F1F4FF;
    --text-color: #000D50;
    --mdc-extended-fab-label-text-font: 'Poppins', sans-serif;
    --mdc-extended-fab-label-text-weight: 600;
    --mdc-extended-fab-label-text-tracking: normal;
    --mdc-extended-fab-label-text-size: clamp(12px, calc(0.9em + .5vw), 18px);
    --bb-accent: #6055cd;
    --bb-soft: #f2f4ff;
    --bb-deep: #2a235f;
    --bb-text: #1f2430;
    --bb-border: rgba(32, 33, 36, 0.08);
    --bb-card: #ffffff;
    --text-secondary-emphasis: #6b7280;
      gap: 20px;

    section {display: grid; gap: 20px; max-width: 100vw;}
    & div.tableSec {max-width: calc(100dvw - 1.5rem);}
}
/* demo card styles */
/* DEPRECATED CSS: .demo_card{ */
/* DEPRECATED CSS:     color: #d3d3d3; */
/* DEPRECATED CSS:     .ipo_cover {min-height: 50px; max-width: 100%;} */
/* DEPRECATED CSS:     .badge_span {min-width: 50px;} */
/* DEPRECATED CSS:     .data_box {flex: 0 0 120px;} */
/* DEPRECATED CSS: } */
h1[role="heading"]{font-size: min(calc(1em + 1.5vw), 24px);}
h2[role="heading"]{font-size: min(calc(1em + 1.5vw), 24px); & small{color: #888888; font-size: 75%;}}
h3[role="heading"]{font-size: min(calc(1em + 1vw), 24px); & small{color: #888888; font-size: 75%;}}
/* .basics{row-gap: 20px;} */
p.aboutBroker{
    overflow: hidden;
    max-height: 70px;
    mask-image: -webkit-linear-gradient(#fff 10%, transparent);
    mask-image: -moz-linear-gradient(#fff 10%, transparent);
    mask-image: linear-gradient(#fff 10%, transparent);
    white-space: break-spaces;
    will-change: height;
    transition: height 0.3s ease;
    &.showMore{max-height: 100%; mask-image: none; will-change: height; transition: height 0.3s ease;}
}

.card{ --bs-card-border-color: #D6D6D6; --bs-card-border-radius: 8px; --bs-card-bg: #fff; --bs-card-cap-bg: #fff; --bs-card-border-radius: 8px; --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - (var(--bs-border-width))); }
/* DEPRECATED CSS: .ratio_card { */
/* DEPRECATED CSS:     --bs-card-border-color: #d6d6fb; */
/* DEPRECATED CSS:     --bs-card-bg: rgb(0 41 213 / 7%); */
/* DEPRECATED CSS:     .table {--bs-table-bg: transparent; --bs-table-striped-bg: rgb(0 41 213 / 7%); --bs-table-border-color: #d6d6fb;} */
/* DEPRECATED CSS: } */
.data_box{padding-right: 20px; margin-bottom: 20px; & span { white-space: pre-line; overflow: hidden; display: -webkit-box; }}
.viewActions .tabBtn{
    --bs-btn-bg: var(--light-bg);
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary-active);
    --bs-btn-hover-color: var(--color-primary-contrast);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-focus-box-shadow: none;
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-color: var(--color-primary-contrast);
    --bs-btn-active-border-color: var(--color-primary-active);
}
.top_card .card:not(.demo_card){
    --bs-card-border-radius: 8px; --bs-card-bg: #fff; color: #000D50;
    & .card-body{border-radius: 0 0 7px 7px;}
    & .price_sec{flex: 0;}
    & .name_cover_div{flex: 2;}
}
.broker_cover{max-width: 80px; & img{max-width: 100%;}}
.current_price{font-size: clamp(16px, calc(1.5em + 0.5vw), 28px); font-weight: 600;}

.applyBtn{
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-color: var(--color-primary-contrast);
    --bs-btn-hover-border-color: var(--color-primary-active);
    --bs-btn-hover-bg: var(--color-primary-active);
    --bs-btn-hover-color: var(--color-primary-contrast);
    /* --bs-btn-border-radius: 0; */
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 1em;
    min-width: 150px;
}

.label{color: #888; font-weight: 400; font-size: clamp(12px, 1em , 14px);}
.table .label{color: #484848;}
.badges{gap: 10px 15px; .product_badge{border: 1px solid #E2E2E2; border-radius: 4px; padding: 5px 1rem;}}

.planTabs{background-color: #eeefff;}
.planTab{
    --bs-btn-font-weight: 600;
    --bs-btn-hover-bg: transparent;
    --bs-btn-focus-bg: transparent;
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-primary);
    --bs-btn-focus-color: var(--color-primary);
    --bs-btn-active-color: var(--color-primary-contrast);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-border-color: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}
.broker_plans .group {margin-bottom: 20px; padding-bottom: 1.5rem; padding-left: .5rem;}

.addition_features .card, .other_card{height: 100%; --bs-card-cap-padding-y: 1rem; --bs-card-bg: #dce0fa; --bs-card-cap-bg: #dce0fa; --bs-card-border-color: #dce0fa; .card-header{border-color: #dce0fa;} .card-body{padding-top: 0;}}
.table td, .table thead th span {padding: 0.5rem 1rem;}
.table-responsive{
    max-width: calc(100vw - 1.5rem);
    td, th {min-width: 100px;}
}
.table.financeTable thead th {
    &:first-child span{padding: 0.5rem 0;}
    & span{padding:  0.5rem;}
}
.stockTable {
    td {min-width: 100px;}
}
.financeTable{ td {min-width: 100px; padding: 1rem; &:first-child span{padding-inline-start: 1rem;}} th {font-weight: 500; --bs-table-color: var(--color-primary);}}

.other_card .card-header{ font-size: clamp(16px, calc(1em + 1vw), 18px);}

.chargeDetailItems{gap: 10px;}
.charges_item, .chargeDetailItems {flex: 0 0 150px;}
/* DEPRECATED CSS: ol.issue_objective{padding-left: 1.5rem;} */
.buyBack_detail_table span.value{ max-width: 200px; display: inline-block; }
.aboutBroker{white-space: break-spaces;}

mat-accordion{
    --mat-expansion-header-description-color: var(--color-base);
    --mat-expansion-header-text-color: var(--text-base-color);
    --mat-expansion-header-text-weight: 600;
    --mat-expansion-header-text-size: clamp(14px, 0.9em + 0.5vw, 16px)
}

@media screen and (min-width: 576px) {
    .charges_group .charges_item, .charges_item, .chargeDetailItems{flex: 0 0 200px;}
}

@media screen and (min-width: 992px) {
    main section{grid-template-columns: 1fr 264px; grid-template-rows: auto; gap: 40px;}
    /* .basics{gap: 40px;} */
    aside { grid-row: 1 / 3; grid-column: 2 / 3;}
    .feature-list .item{flex: 0 0 200px;}
    .broker_cover{max-width: 120px;}
}

.ad-container {
    text-align: center; /* Center the ad container */
    width: 100%; /* Ensure the container takes full width */
}

.ad-padding {
    padding-top: 8px;
    padding-bottom: 8px;
}

.desktop-ad, .mobile-ad {
    display: none; /* Hide both ads by default */
}

@media (min-width: 1024px) {
    .desktop-ad {
        display: inline-block; /* Show desktop ad on larger screens */
        /* Ensure smaller desktop ads are centered within the container */
        text-align: center;
    }

    .desktop-ad img {
        display: block; /* Ensure image is treated as a block element */
        margin: 0 auto; /* Center the image horizontally */
    }
}

@media (max-width: 1023px) {
    .mobile-ad {
        display: inline-block; /* Show mobile ad on smaller screens */
        /* Ensure smaller mobile ads are centered within the container */
        text-align: center;
    }
}
  .card-title {
      color: var(--bb-deep);
  }

  /* Specific styles for sections */
/* DEPRECATED CSS:   .bb-section-card { */
/* DEPRECATED CSS:       border: 1px solid var(--bb-border); */
/* DEPRECATED CSS:       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Mimic shadow-lg * / */
/* DEPRECATED CSS:       background-color: var(--bb-card); */
/* DEPRECATED CSS:       border-radius: 0.75rem; /* Mimic rounded-xl * / */
/* DEPRECATED CSS:       overflow: hidden; */
/* DEPRECATED CSS:   } */

  /* How to Participate Section */
  .participate-step-card {
      background: linear-gradient(to bottom, #ffffff, #fcfcff); /* from-white to-fcfcff */
      border: 1px solid var(--bb-border);
      border-radius: 0.75rem; /* rounded-xl */
      height: 100%;
  }
  .participate-icon-wrapper {
      width: 2.25rem; /* w-9 */
      height: 2.25rem; /* h-9 */
      border-radius: 0.375rem; /* rounded-md */
      background-color: var(--bb-soft);
      color: var(--bb-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem; /* Adjust icon size */
  }

  /* Investment Calculator Section */
  .calculator-input-group .form-control {
      margin-top: 0.25rem; /* mt-1 */
  }
  .calculator-info-card {
      border: 1px dashed rgba(96, 85, 205, 0.35); /* border-dashed border-bb-accent/35 */
      border-radius: 0.75rem; /* rounded-xl */
      background-color: #ffffff;
      padding: 1rem; /* p-4 */
  }
  .bb-table .table-header-row {
      background-color: #fafbff; /* bg-fafbff */
      color: var(--bb-text);
  }
  .bb-table .table-header-row th {
      color: var(--bb-text);
  }
  .bb-table tbody tr:hover {
      background-color: #fafaff; /* hover:bg-fafaff */
  }
  .text-green-600 {
      color: #22c55e; /* Tailwind green-600 */
  }
  .text-muted-foreground {
      color: var(--text-secondary-emphasis); /* Using the defined variable */
  }

  /* Investment Details Section */
  .investment-detail-row {
      background-color: #ffffff;
      border: 1px solid var(--bb-border);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm */
      border-radius: 0.5rem; /* rounded-lg */
      padding: 1rem; /* p-4 */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      transition: all 0.2s ease-in-out; /* transition-all duration-200 */
  }
  .investment-detail-row:hover {
      transform: scale(1.01);
      background-color: rgba(242, 244, 255, 0.8); /* rgba(242, 244, 255, 0.8) */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* hover:shadow-md */
  }
  @media (min-width: 576px) { /* sm breakpoint */
      .investment-detail-row {
          flex-direction: row;
          align-items: center;
      }
      .investment-detail-row .label-col {
          width: 66.666667%; /* sm:w-2/3 */
      }
      .investment-detail-row .value-col {
          width: 33.333333%; /* sm:w-1/3 */
          text-align: right;
          margin-top: 0;
      }
  }
  .investment-detail-icon-wrapper {
      width: 2rem; /* w-8 */
      height: 2rem; /* h-8 */
      border-radius: 9999px; /* rounded-full */
      background-color: var(--bb-soft);
      color: var(--bb-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 0.75rem; /* mr-3 */
      font-size: 1rem; /* Adjust icon size */
  }

  /* Expected Profit Mobile Cards */
  .profit-mobile-card {
      background-color: #ffffff;
      border: 1px solid var(--bb-border);
      border-radius: 0.5rem; /* rounded-lg */
      padding: 1rem; /* p-4 */
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm */
      display: flex;
      flex-direction: column;
      transition: all 0.2s ease-in-out; /* transition-all duration-200 */
  }
  .profit-mobile-card:hover {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* hover:shadow-md */
  }
  .profit-mobile-card .card-title-mobile {
      font-size: 1.125rem; /* text-lg */
      font-weight: bold;
      color: var(--bb-deep);
      margin-bottom: 0.5rem; /* mb-2 */
  }
  .profit-mobile-card .text-muted-foreground span {
      font-weight: 600; /* font-semibold */
      color: var(--bb-text);
  }
  .profit-mobile-card .text-green-600 {
      color: #22c55e; /* Tailwind green-600 */
  }
  .profit-mobile-card .text-bb-deep {
      color: var(--bb-deep);
  }
  .date_progress>div {
    flex: 0 0 calc(100% / var(--col, 4));
    width: calc(100% / var(--col, 4));
    overflow: hidden;
    padding-inline: 2px;
    padding-top: 35px;
    position: relative;
  }

  .icon {
    position: absolute;
    top: 5px;
    color: #888;
  }

  .end_icon1 {
    left: auto;
    right: 5px;
  }

  .start_icon1 {
    right: auto;
    left: 5px;
  }

  .bar1 {
    width: 100%;
    height: 7px;
    background-color: #eee;

    &.active1 {
      background-color: green;
    }
  }

  .row>div:first-child .bar1 {
    border-radius: 100vw 0 0 100vw;
  }

  .row>div:last-child .bar1 {
    border-radius: 0 100vw 100vw 0;
  }

  .desc {
    color: #888;
  }

  p {
    font-size: clamp(12px, 0.9em, 16px);
  }