.top-left-code{
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    position: relative;
    background: linear-gradient(135deg, #0d0b23, #21213b);
    backdrop-filter: blur(14px);
    box-shadow: 0px 15px 15px #0d0b23;
}

.top-left-code p{
    color: rgba(192,132,252,0.75);
}

.top-left-code code{
    font-size: 20px;
    color:#c084fc;
    letter-spacing: 1px;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(139,92,246,0.65);
}

.copy-tag{
    position: absolute;
    right: 5%;
    top: 10%;
    visibility: hidden;
    color: rgba(192,132,252,0.75);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    font-size: 11px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(10px);
}

.check-tag{
    position: absolute;
    right: 5%;
    top: 10%;
    visibility: hidden;
    color:#c084fc;
    border: 1px solid #c084fc;
    border-radius: 6px;
    font-size: 11px;
    background: #1f1f2e;
}

.top-left-code:hover .copy-tag{
    visibility: visible;
}

.copy-tag:hover{
    cursor: pointer;
    color: white;
}

.top-right-code{
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: linear-gradient(135deg, #0d0b23, #21213b);
    backdrop-filter: blur(16px);
        box-shadow: 0px 15px 15px #0d0b23;

}

.top-right-code-first{
    background: linear-gradient(90deg, #53166b, #8919b6 30%, #bc13fe);
    border-top-right-radius: 14px;
    border-top-left-radius: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.top-right-code-first span{
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.first-circle{ background-color:#f65c5c;}
.second-circle{ background-color:#faf88b;}
.third-circle{ background-color:#c084fc;}

.needs{
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: linear-gradient(170deg, #8a39aa 30%, #871fb1, #bc13fe 99%);
    color: #cacaca;
    backdrop-filter: blur(16px);
    /* background-image: url(https://modal.com/_app/immutable/assets/landing-bg-boxes.e85cba64.svg); */
    background-position-y: bottom;
    background-repeat: no-repeat;
    filter: saturate(1.1);
}

.needs i{
    font-size: 21px;
}

.costs-table{
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: linear-gradient(200deg, #ba48e7, #6a1a8a, #bc13fe 99%);
    backdrop-filter: blur(16px);
        box-shadow: 0px 15px 15px #0b0216;

}



.cost-l2 p{
    font-size: 18px;
}

.cost-list{
    position: relative;
}

.button-l1{
    position: absolute;
    right: 0%;
}

.button-l2{
    position: absolute;
    right: 0%;
    visibility: hidden;
}

.toggle-button{
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    cursor: pointer;
    background: rgba(31,31,46,0.4);
    backdrop-filter: blur(10px);
}

.toggle-button div{
    display: inline-block;
    border-radius: 12px;
}

.toggle-left{
    border: 1px solid rgba(139,92,246,0.6);
    color:#c084fc;
    background: rgba(139,92,246,0.18);
    box-shadow: 0 0 12px rgba(139,92,246,0.6);
}

.bottom-logo div img{
    width: 200px;
    padding: 20px 0;
    animation: bt-logo 3s ease-in-out infinite;
}

.chart-box{
    border: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 38px;
    border-radius: 14px;
    background: rgba(31,31,46,0.45);
    backdrop-filter: blur(16px);
        box-shadow: 0px 15px 15px #0d0b23;

}

.chart-main{
    background-image: url('../Assets/final_chart.png');
    background-size:cover;
    overflow: hidden;
    background-position: left;
    background-repeat: no-repeat;
    animation: bg-img 50s linear infinite;
    z-index: 1;
    height: 100%;
    width: 100%;
    opacity: 0.45;
}

table th,
table td {
  padding: 10px;
}

.table-top1{
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
        background: linear-gradient(135deg, #0d0b23, #21213b);
        box-shadow: 0px 15px 15px #0d0b23;


}

#table-t3-s, 
#table-t1-s, 
#table-t2-s{
    background: rgba(139,92,246,0.18);
    margin-top: 2px;
    padding-left: 20px;
    border-radius: 12px;
}

.table-row:hover {
    background-color: rgba(139,92,246,0.12);
    cursor: pointer;
}

@media (max-width:610px) {
    .table-flex-set{
        display: block !important;
    }
    p{
        font-size: 14px;
    }
    .button-l1,
    .button-l2{
        font-size: 13px !important;
    }
    .toggle-button{
        width: fit-content;
    }
    .box-div1{
        height: 120px !important;
        padding-bottom: 0% !important;
        border-radius: 10px;
    }
    .chart-box{
        padding-bottom: 32px;
        margin-left: 10px;
        margin-right: 10px;
    }
}

@keyframes bt-logo {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(30deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-30deg); }
    100% { transform: rotate(0deg); }
}

@keyframes bg-img {
    0% {background-position: left;}
    100%{ background-position: right;}
}