.fh-shell {
      font-family: 'DM Sans', sans-serif;
      background: linear-gradient(135deg, #f0f4ff 0%, #fafbff 50%, #f5f0ff 100%);
      /* min-height: 100vh; */
      padding: 0;
    }

    /* Hero section background */
    .fh-hero {
      position: relative;
      overflow: hidden;
      background: linear-gradient(120deg, #0f1f5c 0%, #1a3a8c 55%, #0d3068 100%);
      padding: 48px 0 36px;
    }
.product_icon_mobile
{
    display:none !important;
}
    /* Decorative background shapes */
    .fh-hero::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 380px; height: 380px;
      background: radial-gradient(circle, rgba(99,130,255,0.18) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .fh-hero::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -40px;
      width: 260px; height: 260px;
      background: radial-gradient(circle, rgba(168,139,250,0.14) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    /* Left panel */
    .fh-left-panel {
      position: relative;
      z-index: 2;
    }

    /* Logo card */
    .fh-logo-wrap {
      display: inline-block;
      background: rgba(255,255,255,0.96);
      border-radius: 18px;
      padding: 14px 18px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .fh-logo-wrap:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.22);
    }

    /* Override img_company parent spacing */
    .fh-logo-wrap img,
    .fh-logo-wrap .img-fluid {
      display: block;
      width: 120px !important;
      height: auto;
      margin: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      background: transparent !important;
    }

    /* Badge chip above company name */
    .fh-badge-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.85);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 20px;
      backdrop-filter: blur(8px);
      margin-bottom: 10px;
    }
    .fh-badge-dot {
      width: 6px; height: 6px;
      background: #4ade80;
      border-radius: 50%;
      animation: fh-pulse 2s ease-in-out infinite;
    }
    @keyframes fh-pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:0.5; transform:scale(0.7); }
    }

    /* Company name override */
    .fh-hero #lbl_company_name,
    .fh-hero h6 {
      color: rgba(255,255,255,0.7) !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      letter-spacing: 0.04em;
      margin-bottom: 6px !important;
    }

    /* Scheme name override */
    .fh-hero #lbl_scheme_name,
    .fh-hero .text-theme-new {
      font-family: 'Sora', sans-serif !important;
      color: #ffffff !important;
      font-size: clamp(1.4rem, 3vw, 2rem) !important;
      font-weight: 700 !important;
      line-height: 1.2 !important;
      text-shadow: 0 2px 12px rgba(0,0,0,0.2);
    }

    /* Category / type */
    .fh-category-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }
    .fh-pill {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.22);
      color: rgba(255,255,255,0.88);
      font-size: 12px;
      font-weight: 400;
      padding: 3px 12px;
      border-radius: 20px;
      backdrop-filter: blur(6px);
    }
    .fh-hero #lbl_category,
    .fh-hero #lbl_scheme_type {
      color: rgba(255,255,255,0.88) !important;
      font-size: 13px !important;
    }

    /* ─── Stat cards ─── */
    .fh-stat-card {
      position: relative;
      overflow: hidden;
      background: rgba(255,255,255,0.97) !important;
      border-radius: 18px !important;
      border: 1px solid rgba(255,255,255,0.8);
      box-shadow: 0 4px 20px rgba(15,31,92,0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
      padding: 24px 16px !important;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      animation: fh-slide-up 0.5s ease both;
      color: #2e2e2e;
    }
    .fh-stat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(15,31,92,0.16), 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    .fh-stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      border-radius: 18px 18px 0 0;
    }
    /* Different accent top-bar per card position */
    .fh-stat-card.fh-c1::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .fh-stat-card.fh-c2::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
    .fh-stat-card.fh-c3::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
    .fh-stat-card.fh-c4::before { background: linear-gradient(90deg, #a855f7, #c084fc); }

    @keyframes fh-slide-up {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .fh-stat-card:nth-child(1) { animation-delay: 0.05s; }
    .fh-stat-card:nth-child(2) { animation-delay: 0.12s; }
    .fh-stat-card:nth-child(3) { animation-delay: 0.19s; }
    .fh-stat-card:nth-child(4) { animation-delay: 0.26s; }

    /* Icon bubble */
    .fh-icon-bubble {
      width: 48px; height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem !important;
      margin: 0 auto 14px !important;
    }
    .fh-c1 .fh-icon-bubble { background: #fef3c7; color: #d97706; }
    .fh-c2 .fh-icon-bubble { background: #dcfce7; color: #16a34a; }
    .fh-c3 .fh-icon-bubble { background: #dbeafe; color: #2563eb; }
    .fh-c4 .fh-icon-bubble { background: #f3e8ff; color: #9333ea; }

    /* Override icon inside cards */
    .fh-stat-card .fa-solid,
    .fh-stat-card .fa-regular {
      font-size: 1.2rem !important;
    }

    /* Label text */
    .fh-stat-label {
      font-size: 11px !important;
      font-weight: 500 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.09em !important;
      color: #444444 !important;
      margin-bottom: 6px !important;
    }

    /* Value overrides */
    .fh-stat-card #aum,
    .fh-stat-card #benchmark,
    .fh-stat-card #inc_date,
    .fh-stat-card #Min_inv {
      font-family: 'Sora', sans-serif !important;
      font-size: 1.4rem !important;
      color: #0f1f5c !important;
      font-weight: 700 !important;
      display: block;
      line-height: 1.2;
    }

    /* ─── CTA buttons ─── */
    .fh-cta-wrap {
      position: relative;
      z-index: 2;
    }

    /* Override bg-theme invest button */
    .fh-cta-wrap a[data-bs-target="#exampleModal"],
    .fh-cta-wrap a.bg-theme:first-child {
      background: linear-gradient(135deg, #9b9045, #897911) !important;
      color: #ffffff !important;
      font-family: 'DM Sans', sans-serif !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      letter-spacing: 0.04em !important;
      padding: 14px 36px !important;
      border-radius: 50px !important;
      box-shadow: 0 4px 20px rgba(249,115,22,0.4) !important;
      transition: transform 0.2s ease, box-shadow 0.2s ease !important;
      text-decoration: none;
      border: none !important;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .fh-cta-wrap a[data-bs-target="#exampleModal"]:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 28px rgba(249,115,22,0.5) !important;
    }

    /* Override bg-theme callback button */
    .fh-cta-wrap a[data-bs-target="#myModal"],
    .fh-cta-wrap a.bg-theme:last-child {
      background: rgba(255,255,255,0.12) !important;
      color: #ffffff !important;
      font-family: 'DM Sans', sans-serif !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      letter-spacing: 0.04em !important;
      padding: 13px 36px !important;
      border-radius: 50px !important;
      border: 1.5px solid rgba(255,255,255,0.35) !important;
      backdrop-filter: blur(8px);
      transition: background 0.2s ease, transform 0.2s ease !important;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .fh-cta-wrap a[data-bs-target="#myModal"]:hover {
      background: rgba(255,255,255,0.22) !important;
      transform: translateY(-2px) !important;
    }

    /* Divider line between left and right on large screens */
    .fh-vdivider {
      display: none;
    }
    @media (min-width: 768px) {
      .fh-vdivider {
        display: block;
        position: absolute;
        left: 0; top: 10%; bottom: 10%;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,0.2), transparent);
      }
    }
    /*********************************/
    
    /**********************/
    
    
    /* ════════════════════════════════════════
       OUTER SHELL — targets existing classes
       only, zero new HTML
    ════════════════════════════════════════ */

    .container-fluid.mt-3.bg-white {
      background: #ffffff !important;
      padding-top: 8px !important;
      padding-bottom: 8px !important;
    }

    /* ── Row card ── */
    .container-fluid.mt-3.bg-white > .container > .row.align-items-stretch {
      background: #ffffff;
      border-radius: 22px;
      border: 1px solid #e8ecf6;
      box-shadow:
        0 2px 8px rgba(15,31,92,0.06),
        0 8px 32px rgba(15,31,92,0.08);
      overflow: hidden;
      animation: rt-rise 0.55s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes rt-rise {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ════════════════════════════════════════
       LEFT COLUMN
    ════════════════════════════════════════ */

    .container-fluid.mt-3.bg-white .col-md-6:first-child {
      border-right: 1px solid #eef0f8;
      padding: 0 !important;
    }

    /* H3 heading — left */
    .container-fluid.mt-3.bg-white .col-md-6:first-child h3 {
      font-family: 'Sora', sans-serif !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      color: #0f1f5c !important;
      letter-spacing: -0.01em !important;
      margin: 0 !important;
      padding: 20px 24px 16px !important;
      background: linear-gradient(90deg, #f4f6fd, #ffffff);
      border-bottom: 1px solid #eef0f8;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .container-fluid.mt-3.bg-white .col-md-6:first-child h3 i {
      width: 36px;
      height: 36px;
      background: #dbeafe;
      color: #2563eb;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }

    /* ── Table ── */
    .container-fluid.mt-3.bg-white .table {
      font-family: 'DM Sans', sans-serif !important;
      font-size: 13.5px !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      margin: 0 !important;
      width: 100% !important;
    }

    /* thead */
    .container-fluid.mt-3.bg-white .table thead tr th {
      background: #f4f6fd !important;
      color: #6b7280 !important;
      font-family: 'DM Sans', sans-serif !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.09em !important;
      border: none !important;
      padding: 12px 18px !important;
      white-space: nowrap;
    }

    /* tbody rows */
    .container-fluid.mt-3.bg-white .table tbody tr {
      transition: background 0.15s ease;
    }
    .container-fluid.mt-3.bg-white .table tbody tr:hover {
      background: #eff4ff !important;
    }
    .container-fluid.mt-3.bg-white .table tbody tr td {
      border: none !important;
      border-bottom: 1px solid #f2f4fb !important;
      padding: 13px 18px !important;
      vertical-align: middle !important;
      color: #374151 !important;
      font-weight: 500 !important;
    }
    .container-fluid.mt-3.bg-white .table tbody tr:last-child td {
      border-bottom: none !important;
    }

    /* Striped rows */
    .container-fluid.mt-3.bg-white .table-striped > tbody > tr:nth-of-type(odd) > * {
      background-color: #fafbff !important;
    }
    .container-fluid.mt-3.bg-white .table-striped > tbody > tr:nth-of-type(even) > * {
      background-color: #ffffff !important;
    }

    /* Clock icon in period column */
    .container-fluid.mt-3.bg-white .table .fa-clock {
      color: #93c5fd !important;
      font-size: 12px !important;
    }

    /* Period text */
    .container-fluid.mt-3.bg-white .table tbody td:first-child {
      font-weight: 500 !important;
      color: #1e293b !important;
    }

    /* Benchmark value — text-success override to a badge-like style */
    .container-fluid.mt-3.bg-white .table .text-success {
      display: inline-block;
      background: #fff2e6;
      color: #df8830 !important;
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
    }

    /* Investment approach value — target the center div labels */
    .container-fluid.mt-3.bg-white .table .text-center > span:not(.text-success),
    .container-fluid.mt-3.bg-white .table .text-center > label:not(.text-success) {
      display: inline-block;
      background: #fff1f4;
      color: #ef5d7b !important;
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 20px;
    }

    /* ════════════════════════════════════════
       RIGHT COLUMN
    ════════════════════════════════════════ */

    .container-fluid.mt-3.bg-white .col-md-6.mt-4.mt-md-0 {
      padding: 0 !important;
      margin-top: 0 !important;
    }

    .container-fluid.mt-3.bg-white .col-md-6.mt-4.mt-md-0 > .rounded-2 {
      border-radius: 0 !important;
      /* padding: 0 !important; */
      height: 100% !important;
    }

    /* H3 heading — right */
    .container-fluid.mt-3.bg-white .col-md-6.mt-4.mt-md-0 h3 {
      font-family: 'Sora', sans-serif !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      color: #0f1f5c !important;
      letter-spacing: -0.01em !important;
      margin: 0 !important;
      padding: 20px 24px 16px !important;
      background: linear-gradient(90deg, #f4f6fd, #ffffff);
      border-bottom: 1px solid #eef0f8;
      display: flex !important;
      align-items: center;
      justify-content: flex-start !important;
      gap: 10px;
    }

    .container-fluid.mt-3.bg-white .col-md-6.mt-4.mt-md-0 h3 i {
      width: 36px;
      height: 36px;
      background: #e0e7ff;
      color: #4f46e5;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }

    /* Canvas wrapper */
    .container-fluid.mt-3.bg-white .col-md-6.mt-4.mt-md-0 .mt-3.h-100 {
      padding: 20px 24px 24px !important;
      margin-top: 0 !important;
    }

    /* ── Legend pseudo-element above chart ── */
    .container-fluid.mt-3.bg-white .col-md-6.mt-4.mt-md-0 .rounded-2::before {
      /* content: '● Investment Approach   ● Benchmark'; */
      display: block;
      padding: 10px 24px 2px;
      font-family: 'DM Sans', sans-serif;
      font-size: 11.5px;
      font-weight: 500;
      color: #9ca3af;
      letter-spacing: 0.03em;
      background: transparent;
    }

    /* Color the two legend dots via gradient trick */
    .container-fluid.mt-3.bg-white .col-md-6.mt-4.mt-md-0 .rounded-2::before {
      background: linear-gradient(90deg,
        transparent 0px, transparent 0px
      );
    }

    /* ════════════════════════════════════════
       RESPONSIVE — stack cleanly on mobile
    ════════════════════════════════════════ */

    @media (max-width: 767px) {
      .container-fluid.mt-3.bg-white .col-md-6:first-child {
        border-right: none;
        border-bottom: 1px solid #eef0f8;
      }
      .container-fluid.mt-3.bg-white .col-md-6.mt-4.mt-md-0 {
        margin-top: 0 !important;
      }
      .container-fluid.mt-3.bg-white > .container > .row.align-items-stretch {
        border-radius: 16px;
      }
    }
/******************************************************/
/* ══════════════════════════════════════════════════
       SHARED CARD POLISH
       targets .bg-white.rounded-3.shadow-sm
    ══════════════════════════════════════════════════ */
    .bg-white.rounded-3.shadow-sm {
      border-radius: 20px !important;
      border: 1px solid #e8ecf6 !important;
      box-shadow:
        0 2px 8px rgba(15,31,92,0.05),
        0 8px 32px rgba(15,31,92,0.08) !important;
      transition: box-shadow 0.25s ease;
    }
    .bg-white.rounded-3.shadow-sm:hover {
      box-shadow:
        0 4px 16px rgba(15,31,92,0.08),
        0 16px 48px rgba(15,31,92,0.11) !important;
    }

    /* ══════════════════════════════════════════════════
       HOLDINGS / SECTORS TAB CARD
    ══════════════════════════════════════════════════ */

    /* Nav pills container */
    .holding-sector .nav.nav-pills {
      background: #f4f6fd;
      border-radius: 14px;
      padding: 5px;
      gap: 4px;
      border: 1px solid #eaecf4;
    }

    /* Each pill link */
    .holding-sector .nav-pills .nav-link {
      font-family: 'DM Sans', sans-serif !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      color: #6b7280 !important;
      border-radius: 10px !important;
      padding: 9px 20px !important;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      border: none !important;
    }
    .holding-sector .nav-pills .nav-link:hover:not(.active) {
      background: rgba(59,130,246,0.08) !important;
      color: #3b82f6 !important;
    }
    .holding-sector .nav-pills .nav-link.active {
      background: #ffffff !important;
      color: #0f1f5c !important;
      font-weight: 600 !important;
      box-shadow: 0 2px 8px rgba(15,31,92,0.12) !important;
    }

    /* Tab pane padding */
    .holding-sector .tab-content {
      padding-top: 8px !important;
    }

    /* Placeholder text */
    #holding_placeholder,
    #sector_placeholder {
      font-family: 'Sora', sans-serif !important;
      font-size: 1.1rem !important;
      color: #c4c9d8 !important;
      letter-spacing: 0.04em;
    }

    /* ══════════════════════════════════════════════════
       MARKET COMPOSITION CARD
    ══════════════════════════════════════════════════ */

    /* Section heading */
    .bg-white.rounded-3.shadow-sm h3 {
      font-family: 'Sora', sans-serif !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      color: #0f1f5c !important;
      letter-spacing: -0.01em !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 18px 20px 14px !important;
      margin: -12px -12px 8px !important;
      background: linear-gradient(90deg, #f4f6fd, #ffffff) !important;
      border-bottom: 1px solid #eef0f8 !important;
      border-radius: 20px 20px 0 0 !important;
    }

    .bg-white.rounded-3.shadow-sm h3 i {
      width: 36px;
      height: 36px;
      background: #e0e7ff;
      color: #4f46e5;
      border-radius: 10px;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 15px !important;
    }

    /* Donut label grid items */
    #composition_data .col-md-6 {
      transition: transform 0.2s ease;
    }
    #composition_data .col-md-6:hover {
      transform: translateY(-3px);
    }

    /* Cap label above each donut */
    #composition_data .fw-bold {
      font-family: 'DM Sans', sans-serif !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.1em !important;
      color: #6b7280 !important;
    }

    /* Inner donut text */
    .donut-center {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Sora', sans-serif !important;
      font-size: 15px !important;
      font-weight: 700 !important;
      color: #0f1f5c !important;
      pointer-events: none;
      text-align: center;
    }

    /* Composition placeholder */
    #composition_placeholder {
      font-family: 'Sora', sans-serif !important;
      font-size: 1.1rem !important;
      color: #c4c9d8 !important;
    }

    /* ══════════════════════════════════════════════════
       FUND MANAGER SECTION
    ══════════════════════════════════════════════════ */

    #fund_manager {
      background: #ffffff;
      border-radius: 20px;
      border: 1px solid #e8ecf6;
      box-shadow: 0 2px 8px rgba(15,31,92,0.05), 0 8px 32px rgba(15,31,92,0.07);
      padding: 36px 24px !important;
      margin-top: 40px !important;
      position: relative;
      overflow: hidden;
      animation: pg-rise 0.55s 0.1s cubic-bezier(0.16,1,0.3,1) both;
    }

    /* Decorative background blob */
    #fund_manager::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 280px; height: 280px;
      background: radial-gradient(circle, rgba(99,130,255,0.10) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    #fund_manager::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -40px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(168,139,250,0.09) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    /* Manager photo */
    #fund_manager #img_manager,
    #fund_manager .img-fluid.shadow-sm.p-2.bg-white {
      border-radius: 50% !important;
      width: 200px !important;
      height: 200px !important;
      object-fit: cover !important;
      padding: 4px !important;
      background: linear-gradient(135deg, #3b82f6, #818cf8) !important;
      box-shadow: 0 8px 32px rgba(59,130,246,0.25) !important;
      border: none !important;
    }

    /* "Fund Manager" eyebrow label */
    #fund_manager .fs-6 {
      font-size: 10.5px !important;
      font-weight: 500 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      color: #9ca3af !important;
    }

    /* Manager name */
    #fund_manager h5.fw-bold {
      font-family: 'Sora', sans-serif !important;
      font-size: 1.1rem !important;
      font-weight: 700 !important;
      color: #ffffff !important;
    }

    /* Bio text */
    #fund_manager #lbl_manager_details,
    #fund_manager .lh-lg {
      font-size: 14px !important;
      line-height: 1.85 !important;
      color: #4b5563 !important;
      font-weight: 400 !important;
    }

    /* ══════════════════════════════════════════════════
       FEE STRUCTURE
    ══════════════════════════════════════════════════ */

    .row.bg-white.shadow-sm.rounded-1 {
      border-radius: 20px !important;
      border: 1px solid #e8ecf6 !important;
      box-shadow: 0 2px 8px rgba(15,31,92,0.05), 0 8px 32px rgba(15,31,92,0.07) !important;
      padding: 0 !important;
      overflow: hidden;
      animation: pg-rise 0.55s 0.15s cubic-bezier(0.16,1,0.3,1) both;
    }

    /* Fee heading */
    .row.bg-white.shadow-sm.rounded-1 h3 {
      font-family: 'Sora', sans-serif !important;
      font-size: 20px !important;
      font-weight: 600 !important;
      color: #0f1f5c !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 18px 24px 14px !important;
      margin: 0 0 0 !important;
      background: linear-gradient(90deg, #f4f6fd, #ffffff) !important;
      border-bottom: 1px solid #eef0f8 !important;
    }

    .row.bg-white.shadow-sm.rounded-1 h3 i {
      width: 36px; height: 36px;
      background: #fef3c7;
      color: #d97706;
      border-radius: 10px;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 15px !important;
    }

    /* Table — header */
    .row.bg-white.shadow-sm.rounded-1 .table thead th {
      background: #f4f6fd !important;
      color: #6b7280 !important;
      font-family: 'DM Sans', sans-serif !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.09em !important;
      border: none !important;
      padding: 13px 20px !important;
    }

    /* Table body rows */
    .row.bg-white.shadow-sm.rounded-1 .table tbody tr {
      transition: background 0.15s ease;
    }
    .row.bg-white.shadow-sm.rounded-1 .table tbody tr:hover {
      background: #14286b !important;
    }
    .row.bg-white.shadow-sm.rounded-1 .table tbody td {
      border: none !important;
      border-bottom: 1px solid #f2f4fb !important;
      padding: 15px 20px !important;
      vertical-align: middle !important;
      font-size: 14px !important;
    }
    .row.bg-white.shadow-sm.rounded-1 .table tbody tr:last-child td {
      border-bottom: none !important;
    }

    /* Cell value labels */
    .row.bg-white.shadow-sm.rounded-1 .fw-500.text-dark {
      font-family: 'Sora', sans-serif !important;
      font-size: 15px !important;
      font-weight: 700 !important;
      color: #0f1f5c !important;
    }

    /* bg-dark header override */
    .row.bg-white.shadow-sm.rounded-1 .bg-dark {
      background: linear-gradient(160deg, #0f1f5c 0%, #1e3a8a 60%, #1d4ed8 100%);
    }

    /* ══════════════════════════════════════════════════


    /* ══════════════════════════════════════════════════
       ENTRANCE ANIMATION
    ══════════════════════════════════════════════════ */
    @keyframes pg-rise {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .col-md-6.mt-4,
    .col-md-6.mt-md-5 {
      animation: pg-rise 0.5s cubic-bezier(0.16,1,0.3,1) both;
    }
    .col-md-6:nth-child(2) { animation-delay: 0.08s; }

    /* ══════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════ */
    @media (max-width: 767px) {
      #fund_manager {
        border-radius: 16px !important;
        padding: 24px 16px !important;
      }
      .bg-white.rounded-3.shadow-sm {
        border-radius: 16px !important;
      }
      .row.bg-white.shadow-sm.rounded-1 {
        border-radius: 16px !important;
      }
    }
    
    
    
    /********************************************************/
    
    .fm-manager-card {
      background: #ffffff;
      border-radius: 22px;
      border: 1px solid #eaecf4;
      box-shadow: 0 4px 24px rgba(15,31,92,0.08), 0 1px 4px rgba(0,0,0,0.04);
      overflow: hidden;
      animation: fm-rise 0.55s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes fm-rise {
      from { opacity:0; transform:translateY(24px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* Left panel — photo + name */
    .fm-left-panel {
      background: linear-gradient(160deg, #0f1f5c 0%, #1e3a8a 60%, #1d4ed8 100%);
      padding: 44px 32px 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .fm-left-panel::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(99,130,255,0.22) 0%, transparent 70%);
      border-radius: 50%;
    }
    .fm-left-panel::after {
      content: '';
      position: absolute;
      bottom: -40px; left: -40px;
      width: 160px; height: 160px;
      background: radial-gradient(circle, rgba(168,139,250,0.18) 0%, transparent 70%);
      border-radius: 50%;
    }

    /* 
    .fm-photo-ring {
      position: relative;
      z-index: 1;
      width: 190px; height: 190px;
      border-radius: 50%;
      padding: 4px;
      background: conic-gradient(#60a5fa, #818cf8, #a78bfa, #60a5fa);
      animation: fm-spin-ring 8s linear infinite;
      margin-bottom: 20px;
    }
    @keyframes fm-spin-ring {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }*/
    .fm-photo-inner {
      width: 100%; height: 100%;
      border-radius: 50%;
      overflow: hidden;
      background: #fff;
      border: 3px solid #ffffff;
    }

    /* Override original img */
    .fm-shell #img_manager,
    .fm-shell .img-fluid.shadow-sm.p-2.bg-white {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      padding: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      border-radius: 0 !important;
      margin: 0 !important;
      display: block;
    }

    /* "Fund Manager" label */
    .fm-shell .fm-left-panel .fs-6 {
      font-size: 10.5px !important;
      font-weight: 500 !important;
      letter-spacing: 0.14em !important;
      text-transform: uppercase !important;
      color: rgba(255,255,255,0.6) !important;
      margin-bottom: 6px !important;
      position: relative; z-index:1;
    }

    /* Manager name */
    .fm-shell .fm-left-panel h5,
    .fm-shell .fm-left-panel .fw-bold {
      font-family: 'Sora', sans-serif !important;
      font-size: 1.25rem !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      text-align: center !important;
      position: relative; z-index:1;
    }

    /* Right panel — bio */
    .fm-right-panel {
      padding: 36px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }
    .fm-bio-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }
    .fm-bio-icon {
      width: 36px;
      height: 36px;
      background: #dbeafe;
      color: #2563eb;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 21px;
      flex-shrink: 0;
    }
    .fm-bio-title {
      font-family: 'Sora', sans-serif;
      font-size: 19px;
      font-weight: 600;
      color: #0f1f5c;
      margin: 0;
      letter-spacing: -0.01em;
    }
    .fm-divider {
      width: 40px; height: 3px;
      background: linear-gradient(90deg, #3b82f6, #818cf8);
      border-radius: 4px;
      margin-bottom: 18px;
    }

    /* Bio text override */
    .fm-shell #lbl_manager_details,
    .fm-shell .lh-lg {
      font-size: 14px !important;
      line-height: 1.85 !important;
      color: #4b5563 !important;
      font-weight: 400 !important;
      text-align: justify;
    }

    /* Expertise tags */
    .fm-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }
    .fm-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #f0f4ff;
      color: #3b54a0;
      font-size: 11.5px;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid #dbeafe;
    }


    /* ══════════════════════════════
       FEE STRUCTURE
    ══════════════════════════════ */
    /* ===== FEETABLE — Clean White Editorial Style ===== */



/* ---- Wrapper ---- */
.feetable {
  background: #ffffff;
  border-radius: 20px;
  padding: 0;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 8px 32px rgba(0,0,0,0.08),
    0 0 0 1px rgba(0,0,0,0.05);
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  position: relative;
  /* margin: 0px; */
}

/* Top accent bar */
.feetable::before {
  /* content: ''; */
  /* display: block; */
  /* height: 4px; */
  /* background: linear-gradient(90deg, #1a1a2e 0%, #16213e 40%, #0f4c81 70%, #2196f3 100%); */
}

.feetable .table-responsive {
  padding: 0;
  overflow: hidden;
  width: 100%;
}

/* ---- Table Base ---- */
.feetable .table {
  margin: 0 !important;
  border-collapse: collapse !important;
  width: 100%;
  font-family: 'DM Sans', sans-serif;
}

/* ---- Header ---- */
.feetable .table thead tr th {
  background: #f7f8fc !important;
  color: #6b7280 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.13em !important;
  padding: 1rem 1.8rem !important;
  border: none !important;
  border-bottom: 1px solid #e5e7eb !important;
  white-space: nowrap;
  position: relative;
}

/* Left border accent on first header cell */
.feetable .table thead tr th:first-child {
  border-left: 3px solid #2196f3 !important;
}

/* Vertical dividers between header cells */
.feetable .table thead tr th:not(:last-child) {
  border-right: 1px solid #e5e7eb !important;
}

/* ---- Body Rows ---- */
.feetable .table tbody tr {
  transition: background 0.15s ease, box-shadow 0.15s ease;
  border-bottom: 1px solid #f3f4f6;
}

.feetable .table tbody tr:last-child {
  border-bottom: none;
}

.feetable .table tbody tr:hover {
  background: #f0f7ff !important;
}

/* ---- Body Cells ---- */
.feetable .table tbody tr td {
  padding: 1.1rem 1.8rem !important;
  border: none !important;
  border-right: 1px solid #f0f0f5 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  background: transparent !important;
  vertical-align: middle;
  position: relative;
}

.feetable .table tbody tr td:last-child {
  border-right: none !important;
}

/* First cell left accent on hover */
.feetable .table tbody tr td:first-child {
  border-left: 3px solid transparent !important;
  transition: border-color 0.2s ease;
}

.feetable .table tbody tr:hover td:first-child {
  border-left-color: #2196f3 !important;
}

/* ---- Value Labels ---- */
.feetable .table tbody tr td .fw-500 {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  display: block;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease;
  line-height: 1;
}

.feetable .table tbody tr:hover td .fw-500 {
  color: #0f4c81 !important;
}

/* ---- Pill tag behind each value (decorative) ---- */
.feetable .table tbody tr td {
  text-align: center;
}

.feetable .table tbody tr td .fw-500::after {
  /* content: '%'; */
  font-size: 0.65rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: #9ca3af;
  margin-left: 2px;
  vertical-align: super;
  line-height: 0;
}

/* ---- Zebra shading ---- */
.feetable .table tbody tr:nth-child(even) td {
  background: #fafafa !important;
}

/* ---- Bottom footer line ---- */
.feetable .table tbody tr:last-child td {
  border-bottom: none !important;
}

.feetable::after {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
}
    /* ══════════════════════════════
       DISCLAIMER
    ══════════════════════════════ */
    .fm-disclaimer {
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-radius: 14px;
      padding: 16px 20px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      animation: fm-rise 0.55s 0.2s cubic-bezier(0.16,1,0.3,1) both;
    }
    .fm-disc-icon {
      width: 32px; height: 32px;
      background: #fef3c7;
      color: #d97706;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .fm-disc-text {
      font-size: 13px !important;
      line-height: 1.7 !important;
      color: #78716c !important;
      margin: 0 !important;
    }
    .fm-disc-text .fw-bold {
      color: #92400e !important;
      font-weight: 600 !important;
    }
    
    /********/
    
    #holding
    {
     height:499px !important;
    }
    #sectors
    {
    height:499px !important;
    }
    
    /******************animation top section for right side boxes ***/
    /* Spotlight overlay element — add one inside each .fh-stat-card */

/* Magnetic icon lift */
.fh-icon-bubble { transition: transform 0.45s cubic-bezier(0.23,1,0.32,1), box-shadow 0.45s ease; }
.fh-stat-card:hover .fh-icon-bubble { transform: translateY(-6px) scale(1.12) rotate(-4deg); }
.fh-c1:hover .fh-icon-bubble { box-shadow: 0 8px 20px rgba(245,158,11,0.35); }
.fh-c2:hover .fh-icon-bubble { box-shadow: 0 8px 20px rgba(34,197,94,0.35); }
.fh-c3:hover .fh-icon-bubble { box-shadow: 0 8px 20px rgba(59,130,246,0.35); }
.fh-c4:hover .fh-icon-bubble { box-shadow: 0 8px 20px rgba(168,85,247,0.35); }


/********modal css starting here*********************************/

  /*modal css start here*/
        .modaldiv .modal-content {
        border: none;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        background: #ffffff;
        }
        .fdtxt
        {    color: #626262;
        /* font-size: 25px; */
        padding-top: 9px;
        }
        .modaldiv .modal-header {
        border: none;
        padding: 11px 15px;
        background: linear-gradient(135deg, #7676db 0%, #252546 100%);
        position: relative;
        overflow: hidden;
        }
        .modaldiv .modal-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        animation: rotate 20s linear infinite;
        }
        @keyframes rotate {
        from {
        transform: rotate(0deg);
        }
        to {
        transform: rotate(360deg);
        }
        }
        .modaldiv .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: 0.8;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
        }
        .modaldiv .modal-header .btn-close:hover {
        opacity: 1;
        transform: rotate(90deg);
        }
        .modaldiv .modal-title {
        color: #ffffff;
        font-weight: 600;
        font-size: 19px;
        text-align: center;
        width: 100%;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 1;
        }
        .modaldiv .modal-body {
        padding: 2rem;
        }
        .modaldiv .subtitle {
        color: #6c757d;
        font-size: 1.05rem;
        margin-bottom: 5px;
        text-align: center;
        font-weight: 400;
        }
        .modaldiv .investment-badge {
        display: inline-block;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        font-size: 0.95rem;
        font-weight: 500;
        margin-bottom: 2rem;
        }
        .modaldiv .form-control {
        border: 1px solid #e7d97b !important;
        border-radius: 16px !important;
        padding: 9px 11px !important;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: #ffffff !important;
        border-radius: 10px !important;
        text-shadow: none !important;
        margin-top: 16px !important;
        font-weight: normal !important;
        /* color: #000 !important; */
        }
        .modaldiv .form-select {
        border: 2px solid #e9ecef;
        border-radius: 16px !important;
        padding: 8px 8px;
        font-size: 1rem;
        transition: all 0.3s ease;
        border-radius: 10px !important;
        }
        .modaldiv .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15);
        background: #ffffff;
        transform: translateY(-2px);
        }
        .modaldiv .input-wrapper {
        position: relative;
        margin-bottom: 2rem;
        }
        .modaldiv .input-icon {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        }
        .modaldiv .form-control:focus~.input-icon {
        transform: translateY(-50%) scale(1.2);
        }
        .modaldiv .btn-invest {
        background: bb9654;
        border: none;
        border-radius: 9px;
        padding: 7px 17px;
        font-size: 1.1rem;
        font-weight: 600;
        color: white;
        max-width: fit-content;
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
        background-color: #9b9045;
        margin-top: 7px;
        margin-bottom: 10px;
        }
        .modaldiv .btn-invest::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
        }
        .modaldiv .btn-invest:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
        }
        .modaldiv .btn-invest:hover::before {
        left: 100%;
        }
        .modaldiv .btn-invest:active {
        transform: translateY(-1px);
        }
        .modaldiv .info-text {
        text-align: center;
        color: #9ca3af;
        font-size: 0.875rem;
        margin-top: 1.5rem;
        }
        .modaldiv .info-text i {
        color: #667eea;
        margin-right: 5px;
        }
        /* Floating animation for decorative elements */
        .modaldiv .floating {
        animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
        0%,
        100% {
        transform: translateY(0px);
        }
        50% {
        transform: translateY(-10px);
        }
        }
        /* Modal entrance animation */
        .modaldiv .modal.show .modal-dialog {
        animation: slideUp 0.4s ease-out;
        }
        @keyframes slideUp {
        from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
        }
        to {
        opacity: 1;
        transform: translateY(0) scale(1);
        }
        }
        /* Success animation */
        @keyframes successPulse {
        0%,
        100% {
        transform: scale(1);
        }
        50% {
        transform: scale(1.05);
        }
        }
        .modaldiv .success-feedback {
        animation: successPulse 0.5s ease;
        }
        /* Loading animation */
        .modaldiv .btn-invest.loading {
        pointer-events: none;
        }
        .modaldiv .btn-invest.loading::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
        to {
        transform: rotate(360deg);
        }
        }
        /*modal css end  here*/
        
        /*************n***********************/
        
        .textvalidation {
    color: #e36c6c !important;
    font-size: 14px;
}

/********** end modal css******************/