body {
                font-family: "Inter", sans-serif;
                scroll-behavior: smooth;
                background: #fff;
            }

            /* --- Hero Section --- */
            .hero {
                padding: 38px 20px 60px;
                text-align: left;
                margin-top: 90px;
                border-radius: 7px;
                BACKGROUND: #ffffff;
                box-shadow: 4px 4px 24px 0 rgba(31, 72, 114, .148);
                border: 0px;
                margin-bottom: 10px;
            }

            .hero h1 {
                font-weight: 700;
                font-size: 2.5rem;
                color: #4b4b8c;
            }

            .hero p {
                font-size: 1.1rem;
                opacity: 0.9;
                color: #000000;
            }

            /* --- Fixed Header --- */
          
            .ipo-header-fixed {
                position: sticky;
                top: 82px;
                z-index: 111;
                background: #fff;
                   box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
                transition: 0.3s ease;
                border-bottom: 3px solid #9b9045;
            }

            .sticky-top {
                position: sticky;
                top: 84px;

            }

            .ipo-status {
                background-color: #ffd8d2;
                color: #ff5858;
                border-radius: 11px;
                font-size: 13px;
                padding: 4px 10px;
                font-weight: normal;
            }

            .min-invest {
                text-align: right;
            }

            .min-invest h4 {
                font-weight: 700;
                margin: 0;
                color: #4b4b8c;
            }

            .fire-icon {
                color: #ff5722;
                animation: glow 2s infinite;
            }

            @keyframes glow {

                0%,
                100% {
                    text-shadow: 0 0 5px #ff7043;
                }

                50% {
                    text-shadow: 0 0 15px #ff5722;
                }
            }

            /* --- Navbar / Tabs --- */
            .scroll-nav {
              padding-top: 5px;
             border-top: 1px solid #dee2e6;
            }

            .scroll-nav a {
                color: #333;
                font-weight: 500;
                padding: 1rem 1.2rem;
                text-decoration: none;
                display: inline-block;
                transition: all 0.3s;
            }


         .scroll-nav a.active {
                color: #4b4b8c;
                padding: 8px 5px;
                border-bottom: 2px solid #4b4b8c;
            }

            /* --- Section Spacing --- */
            section {
                padding: 80px 0;
                border-bottom: 1px solid #eee;
            }

            /* --- Timeline --- */
            .timeline {
                border-left: 2px solid #0d6efd;
                padding-left: 1.2rem;
                margin-top: 1rem;
            }

            .timeline-item {
                position: relative;
                margin-bottom: 1rem;
                animation: fadeInUp 0.8s ease;
            }

            .timeline-item::before {
                content: "";
                position: absolute;
                left: -1.3rem;
                top: 5px;
                width: 14px;
                height: 14px;

                border-radius: 50%;
            }

            .timeline-item.pending::before {
                background: #ccc;
            }

            .btn-light {
                color: #000;
                background-color: #9b9045;
                border-color: none;
                padding: 5px 9px !important;
                color: #ffffff !important;
                font-size: 16px;
                border-radius: 5px;
            }

            .btn-light:hover {
                color: #000;
                background-color: #96882d;
                border-color: none;
                padding: 5px 9px !important;
                color: #ffffff !important;
                font-size: 16px;
                border-radius: 5px;
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }



            .performance-chart-container {
                background-color: #ffffff;
                padding: 40px 00px;
                border-radius: 8px;
                max-width: 600px;

                box-shadow: none;
            }

            /* Bar chart specific styles */
            .chart-grid {
                display: grid;
                grid-template-columns: 80px 1fr auto;
                align-items: center;
                gap: 25px 5px;
                position: relative;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .chart-label {
                font-weight: 500;
                text-align: right;
                padding-right: 15px;
                color: #212529;
                font-size: 1rem;
            }

            .chart-bar-wrapper {
                position: relative;
                height: 25px;
                background-color: transparent;
                border-radius: 4px;
                overflow: hidden;

            }

            .chart-bar {
                height: 100%;
                background-color: #9b9045;
                width: 0;
                transition: width 1.5s ease-out;
                border-radius: 2px;
            }


            .animate-bars .chart-bar {
                width: var(--bar-width, 0);
            }


            .chart-value-text {
                font-weight: 600;
                color: #212529;
                padding-left: 10px;
                white-space: nowrap;
                opacity: 0;
                transition: opacity 0.5s ease-in 1s, transform 0.5s ease-out 1s;
                transform: translateX(5px);

            }

            .animate-bars .chart-value-text {
                opacity: 1;
                transform: translateX(0);
            }



            .grid-line-container {
                grid-column: 1 / 4;
                grid-row: 1 / -1;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                pointer-events: none;
            }

            .grid-line {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 1px;
                background-color: #e9ecef;
                z-index: 1;
            }

            .grid-line.line-start {
                left: 80px;
            }

            .grid-line.line-center {
                left: calc(80px + (100% - 80px) * 0.5);
            }

            tbody tr:nth-child(odd) {
                background-color: #f8f8f8;
                /* Light gray background for even rows */
            }

            .smaltext {
                text-align: justify;
                font-size: 18px;
                line-height: 34px;
                color: #4e4e4e;
            }
            .sticky-sidebar-wrapper {
                padding-top: 1.5rem;
                z-index: 11;
            }


            .main-content-area {
                min-height: 200vh;
            }


            .timeline-item {
                border-left: 1px solid #9b9045;
                padding-left: 15px;
                margin-left: 5px;
                position: relative;
                padding-bottom: 15px;
            }

            .timeline-item:last-child {
                border-left: none;
            }

            .timeline-dot {
                position: absolute;
                left: -6px;
                top: -2px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
            }

            .timeline-dot.done {
                background-color: #198754;
                font-size: 12px;
            }

            .timeline-dot.pending {
                background-color: white;
                border: 0px solid #9b9045;
                font-size: 0;
                background: #ff9933;
            }

            .timeline-text {
                font-weight: 500;
                font-size: 14px;
                color: #333333;
            }

            .timeline-date {
                font-size: 0.85rem;
                color: #6c757d;
            }


            .info-box {
                padding: 10px 0;
            }

            .info-box strong {
                font-weight: 600;
            }

            .mainline-issue-table>tbody>tr:first-child .head {
                font-weight: 500;
                color: #212529;
                font-size: 13px;
                white-space: nowrap;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .bg-dark {
                --bs-bg-opacity: 1;
                background-color: rgb(249 249 249) !important;
                color: #5b5656 !important;
                border: 0px !important;
            }

            .table>:not(caption)>*>* {
                padding: 16px 6px;
                color: #434343;
                font-size:15px;
               
            }

            .table-dark {
                --bs-table-color: #fff;
                --bs-table-bg: #ececec;
            }

            .scrolled .headernew {
                box-shadow: none !important;
                border-bottom: 1px solid #dfdede;
            }

            .smalltext {
                color: #4c4c4c;
                font-size: 14px;

            }

            .smalltext1 {
                font-size: 19px;
                color: #5c5757;
            }

       .prospectusbtn {
    background: #9b9045 !important;
    color: #ffffff;
    padding: 8px 19px;
    border-radius: 5px;
}
    .prospectusbtn .fa{font-size: 14px;
    padding-right: 8px;
    }

            .prospectusbtn:hover {
                color: #ffffff;
            }

            .statusopen {
                background: #c4ebc4;
                color: #038103;
                font-weight: normal;
            }

            .linkcolor {
                color: #4b4b8c;
            }

            .timelinetext {
                color: #ffffff;
                background: #6161cd;
                text-align: center;
                font-size: 16px;
                padding: 10px 9px;
                border-radius: 10px;
                margin-bottom: 36px !important;
            }
            .chart-container {
                max-width: 500px;
                margin: 0px auto;
                padding: 20px;
                border: 1px solid #dee2e6;
                border-radius: 0.25rem;
                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                font-family: Arial, sans-serif;
            }

            .chart-area {
                height: 300px;
                /* Max height for bars */
                border-left: 2px solid #000;
                border-bottom: 2px solid #000;
                display: flex;
                align-items: flex-end;
                /* Bars grow from bottom */
                justify-content: space-around;
                padding-bottom: 0;
                margin-top: 10px;
                position: relative;
                /* For y-axis labels if needed */
            }

            .bar-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 0 15px;
                /* Spacing between bars */
                width: 50px;
                /* Width for each bar section including label */
            }

            .bar {
                width: 35px;
                /* "Minimum width" for the bar itself */
                background-color: #8c8f4f;
                /* Custom olive/brown color */
                transition: all 0.7s ease-out;
                /* For animation on load */
                height: 0;
                /* Start height at 0 for animation */
                cursor: pointer;
                position: relative;
                /* For tooltip */
            }

            .bar:hover {
                background-color: #a7a974;
                /* Lighter olive on hover */
                transform: scaleY(1.02);
                /* Slight scale effect on hover */
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }

            .x-label {
                margin-top: 8px;
                font-size: 0.9em;
                text-align: center;
                white-space: nowrap;
                /* Prevents text from wrapping */
            }

            /* Y-Axis Labeling (simple approximation) */
            .y-axis-label-wrapper {
                position: relative;
                float: left;
                width: 40px;
                /* Space for Y-axis labels */
                height: 300px;
                /* Matches chart-area height */
                font-size: 0.8rem;
                text-align: right;
                margin-right: -2px;
                /* Pull closer to the chart line */
            }

            .y-axis-label-wrapper div {
                position: absolute;
                right: 5px;
                line-height: 1;
            }

            .y-axis-label-wrapper div:first-child {
                top: 0;
            }

            .y-axis-label-wrapper div:nth-child(2) {
                top: 50px;
            }

            .y-axis-label-wrapper div:nth-child(3) {
                top: 100px;
            }

            .y-axis-label-wrapper div:nth-child(4) {
                top: 150px;
            }

            .y-axis-label-wrapper div:nth-child(5) {
                top: 200px;
            }

            .y-axis-label-wrapper div:nth-child(6) {
                top: 250px;
            }

            .y-axis-label-wrapper div:last-child {
                top: 290px;
            }

            /* For 0 */

            /* Define heights for animation */
            .bar.animate-fy23 {
                height: calc(334.92 / 600 * 300px);
            }

            /* Assuming max 600 for Y-axis */
            .bar.animate-fy24 {
                height: calc(421.93 / 600 * 300px);
            }

            .bar.animate-fy25 {
                height: calc(553.69 / 600 * 300px);
            }

            .border1 td {
    border: 1px solid #ccc;
}

            section {
                padding: 21px 0;
                border-bottom: 1px solid #eee;
            }

            .h2heading {
                color: #4b4b8c;
                font-size: 23px;
                padding: 14px 3px;
                background: #f8f8f8;
            }

            .arrowright {
                color: #9b9045;
                font-size: 24px;
                font-weight: bold;
                /* padding-right: 1px; */
                position: absolute;
                margin-left: -15px;
                margin-top: 5px;
            }

            .buybolt {
                font-size: 13px;
                margin-right: 6px;
                color: #e1e12e;
            }

            .contactdetail {
                font-size: 17px;
                line-height: 36px;
                padding-top: 6px;
                padding-bottom: 23px;
                color: #5a5a5a;
            }

            .h3detail {
                font-size: 20px;
                padding-top: 17px;
                color: #524b4b;
            }

            .icons {
                color: #f8f8ff !important;
                padding: 6px;
                background: #6161cd !important;
                font-size: 16px;
                border-radius: 3px;
            }

            .contactdetail a {
                color: #5a5a5a;
            }
            html {
  scroll-behavior: smooth;
}
section {
    box-shadow: 0 0 10px rgba(0, 0, 0, .10);
    border-radius: 8px;
    margin-top: 10px;
}

            body {
                font-family: "Inter", sans-serif;
                scroll-behavior: smooth;
                background: #fff;
            }

            /* --- Hero Section --- */
            .hero {
                padding: 38px 20px 60px;
                text-align: left;
                margin-top: 90px;
                border-radius: 7px;
                BACKGROUND: #ffffff;
                box-shadow: 4px 4px 24px 0 rgba(31, 72, 114, .148);
                border: 0px;
                margin-bottom: 10px;
            }

            .hero h1 {
                font-weight: 700;
                font-size: 2.5rem;
                color: #4b4b8c;
            }

            .hero p {
                font-size: 1.1rem;
                opacity: 0.9;
                color: #000000;
            }

            /* --- Fixed Header --- */
          
            .ipo-header-fixed {
                position: sticky;
                top: 73px;
                z-index: 111;
                background: #fff;
                   box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
                transition: 0.3s ease;
                border-bottom: 3px solid #9b9045;
            }

            .sticky-top {
                position: sticky;
                top: 84px;

            }

            .ipo-status {
                background-color: #ffd8d2;
                color: #ff5858;
                border-radius: 11px;
                font-size: 13px;
                padding: 4px 10px;
                font-weight: normal;
            }

            .min-invest {
                text-align: right;
            }

            .min-invest h4 {
                font-weight: 700;
                margin: 0;
                color: #4b4b8c;
            }

            .fire-icon {
                color: #ff5722;
                animation: glow 2s infinite;
            }

            @keyframes glow {

                0%,
                100% {
                    text-shadow: 0 0 5px #ff7043;
                }

                50% {
                    text-shadow: 0 0 15px #ff5722;
                }
            }

            /* --- Navbar / Tabs --- */
            .scroll-nav {
              padding-top: 5px;
             border-top: 1px solid #dee2e6;
            }

            .scroll-nav a {
                color: #333;
                font-weight: 500;
                padding: 1rem 1.2rem;
                text-decoration: none;
                display: inline-block;
                transition: all 0.3s;
            }


         .scroll-nav a.active {
                color: #4b4b8c;
                padding: 8px 5px;
                border-bottom: 2px solid #4b4b8c;
            }

            /* --- Section Spacing --- */
            section {
                padding: 80px 0;
                border-bottom: 1px solid #eee;
            }

            /* --- Timeline --- */
            .timeline {
                border-left: 2px solid #0d6efd;
                padding-left: 1.2rem;
                margin-top: 1rem;
            }

            .timeline-item {
                position: relative;
                margin-bottom: 1rem;
                animation: fadeInUp 0.8s ease;
            }

            .timeline-item::before {
                content: "";
                position: absolute;
                left: -1.3rem;
                top: 5px;
                width: 14px;
                height: 14px;

                border-radius: 50%;
            }

            .timeline-item.pending::before {
                background: #ccc;
            }
.btn.btn-light:hover{
    background:#817730 !important;
}
            .btn-light {
                color: #000;
                background-color: #9b9045;
                border-color: none;
                padding: 5px 9px !important;
                color: #ffffff !important;
                font-size: 16px;
                border-radius: 5px;
            }

            .btn-light:hover {
                color: #000;
                background-color: #96882d;
                border-color: none;
                padding: 5px 9px !important;
                color: #ffffff !important;
                font-size: 16px;
                border-radius: 5px;
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }



            .performance-chart-container {
                background-color: #ffffff;
                padding: 40px 00px;
                border-radius: 8px;
                max-width: 600px;

                box-shadow: none;
            }

            /* Bar chart specific styles */
            .chart-grid {
                display: grid;
                grid-template-columns: 80px 1fr auto;
                align-items: center;
                gap: 25px 5px;
                position: relative;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .chart-label {
                font-weight: 500;
                text-align: right;
                padding-right: 15px;
                color: #212529;
                font-size: 1rem;
            }

            .chart-bar-wrapper {
                position: relative;
                height: 25px;
                background-color: transparent;
                border-radius: 4px;
                overflow: hidden;

            }

            .chart-bar {
                height: 100%;
                background-color: #9b9045;
                width: 0;
                transition: width 1.5s ease-out;
                border-radius: 2px;
            }


            .animate-bars .chart-bar {
                width: var(--bar-width, 0);
            }


            .chart-value-text {
                font-weight: 600;
                color: #212529;
                padding-left: 10px;
                white-space: nowrap;
                opacity: 0;
                transition: opacity 0.5s ease-in 1s, transform 0.5s ease-out 1s;
                transform: translateX(5px);

            }

            .animate-bars .chart-value-text {
                opacity: 1;
                transform: translateX(0);
            }



            .grid-line-container {
                grid-column: 1 / 4;
                grid-row: 1 / -1;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                pointer-events: none;
            }

            .grid-line {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 1px;
                background-color: #e9ecef;
                z-index: 1;
            }

            .grid-line.line-start {
                left: 80px;
            }

            .grid-line.line-center {
                left: calc(80px + (100% - 80px) * 0.5);
            }

            tbody tr:nth-child(odd) {
                background-color: #f8f8f8;
                /* Light gray background for even rows */
            }

            .smaltext {
                text-align: justify;
                font-size: 18px;
                line-height: 34px;
                color: #4e4e4e;
            }
            .sticky-sidebar-wrapper {
                padding-top: 1.5rem;
                z-index: 11;
            }


            .main-content-area {
                min-height: 200vh;
            }


            .timeline-item {
                border-left: 1px solid #9b9045;
                padding-left: 15px;
                margin-left: 5px;
                position: relative;
                padding-bottom: 15px;
            }

            .timeline-item:last-child {
                border-left: none;
            }

            .timeline-dot {
                position: absolute;
                left: -6px;
                top: -2px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
            }

            .timeline-dot.done {
                background-color: #198754;
                font-size: 12px;
            }

            .timeline-dot.pending {
                background-color: white;
                border: 0px solid #9b9045;
                font-size: 0;
                background: #ff9933;
            }

            .timeline-text {
                font-weight: 500;
                font-size: 14px;
                color: #333333;
            }

            .timeline-date {
                font-size: 0.85rem;
                color: #6c757d;
            }


            .info-box {
                padding: 10px 0;
            }

            .info-box strong {
                font-weight: 600;
            }

            .mainline-issue-table>tbody>tr:first-child .head {
                font-weight: 500;
                color: #212529;
                font-size: 13px;
                white-space: nowrap;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            .bg-dark {
                --bs-bg-opacity: 1;
                background-color: rgb(249 249 249) !important;
                color: #5b5656 !important;
                border: 0px !important;
            }

            .table>:not(caption)>*>* {
                padding: 16px 6px;
                color: #434343;
                font-size:15px;
               
            }

            .table-dark {
                --bs-table-color: #fff;
                --bs-table-bg: #ececec;
            }

            .scrolled .headernew {
                box-shadow: none !important;
                border-bottom: 1px solid #dfdede;
            }

            .smalltext {
                color: #4c4c4c;
                font-size: 14px;

            }

            .smalltext1 {
                font-size: 19px;
                color: #5c5757;
            }

       .prospectusbtn {
    background: #9b9045 !important;
    color: #ffffff;
    padding: 8px 19px;
    border-radius: 5px;
}
    .prospectusbtn .fa{font-size: 14px;
    padding-right: 8px;
    }

            .prospectusbtn:hover {
                color: #ffffff;
            }

            .statusopen {
                background: #c4ebc4;
                color: #038103;
                font-weight: normal;
            }

            .linkcolor {
                color: #4b4b8c;
            }

            .timelinetext {
                color: #ffffff;
                background: #6161cd;
                text-align: center;
                font-size: 16px;
                padding: 10px 9px;
                border-radius: 10px;
                margin-bottom: 36px !important;
            }
            .chart-container {
                max-width: 500px;
                margin: 0px auto;
                padding: 20px;
                border: 1px solid #dee2e6;
                border-radius: 0.25rem;
                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                font-family: Arial, sans-serif;
            }

            .chart-area {
                height: 300px;
                /* Max height for bars */
                border-left: 2px solid #000;
                border-bottom: 2px solid #000;
                display: flex;
                align-items: flex-end;
                /* Bars grow from bottom */
                justify-content: space-around;
                padding-bottom: 0;
                margin-top: 10px;
                position: relative;
                /* For y-axis labels if needed */
            }

            .bar-wrapper {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 0 15px;
                /* Spacing between bars */
                width: 50px;
                /* Width for each bar section including label */
            }

            .bar {
                width: 35px;
                /* "Minimum width" for the bar itself */
                background-color: #8c8f4f;
                /* Custom olive/brown color */
                transition: all 0.7s ease-out;
                /* For animation on load */
                height: 0;
                /* Start height at 0 for animation */
                cursor: pointer;
                position: relative;
                /* For tooltip */
            }

            .bar:hover {
                background-color: #a7a974;
                /* Lighter olive on hover */
                transform: scaleY(1.02);
                /* Slight scale effect on hover */
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            }

            .x-label {
                margin-top: 8px;
                font-size: 0.9em;
                text-align: center;
                white-space: nowrap;
                /* Prevents text from wrapping */
            }

            /* Y-Axis Labeling (simple approximation) */
            .y-axis-label-wrapper {
                position: relative;
                float: left;
                width: 40px;
                /* Space for Y-axis labels */
                height: 300px;
                /* Matches chart-area height */
                font-size: 0.8rem;
                text-align: right;
                margin-right: -2px;
                /* Pull closer to the chart line */
            }

            .y-axis-label-wrapper div {
                position: absolute;
                right: 5px;
                line-height: 1;
            }

            .y-axis-label-wrapper div:first-child {
                top: 0;
            }

            .y-axis-label-wrapper div:nth-child(2) {
                top: 50px;
            }

            .y-axis-label-wrapper div:nth-child(3) {
                top: 100px;
            }

            .y-axis-label-wrapper div:nth-child(4) {
                top: 150px;
            }

            .y-axis-label-wrapper div:nth-child(5) {
                top: 200px;
            }

            .y-axis-label-wrapper div:nth-child(6) {
                top: 250px;
            }

            .y-axis-label-wrapper div:last-child {
                top: 290px;
            }

            /* For 0 */

            /* Define heights for animation */
            .bar.animate-fy23 {
                height: calc(334.92 / 600 * 300px);
            }

            /* Assuming max 600 for Y-axis */
            .bar.animate-fy24 {
                height: calc(421.93 / 600 * 300px);
            }

            .bar.animate-fy25 {
                height: calc(553.69 / 600 * 300px);
            }

            .border1 td {
    border: 1px solid #ccc;
}

            section {
                padding: 21px 0;
                border-bottom: 1px solid #eee;
            }

            .h2heading {
                color: #4b4b8c;
                font-size: 23px;
                padding: 14px 3px;
                background: #f8f8f8;
            }

            .arrowright {
                color: #9b9045;
                font-size: 24px;
                font-weight: bold;
                /* padding-right: 1px; */
                position: absolute;
                margin-left: -15px;
                margin-top: 5px;
            }

            .buybolt {
                font-size: 13px;
                margin-right: 6px;
                color: #e1e12e;
            }

            .contactdetail {
                font-size: 17px;
                line-height: 36px;
                padding-top: 6px;
                padding-bottom: 23px;
                color: #5a5a5a;
            }

            .h3detail {
                font-size: 20px;
                padding-top: 17px;
                color: #524b4b;
            }

            .icons {
                color: #f8f8ff !important;
                padding: 6px;
                background: #6161cd !important;
                font-size: 16px;
                border-radius: 3px;
            }

            .contactdetail a {
                color: #5a5a5a;
            }
            html {
  scroll-behavior: smooth;
}
section {
    box-shadow: 0 0 10px rgba(0, 0, 0, .10);
    border-radius: 8px;
    margin-top: 10px;
}