#banner {
    /* background: linear-gradient(69.66deg, #FFF2C9 0%, #FAFAFA 64.71%, #FFFFFF 98.18%); */
    hr {
        color: #D4AF37;
        height: 4px;
        background: #D4AF37;
        border-radius: 9px;
        opacity: 0.8;
        width: 30%;
        margin: 0 0 1rem 0;
    }
}
#serviceModal .modal-content{
    top: 3rem;
}
#serviceModal .service_main{
    background: #F6FAFD;
}
#serviceModal hr {
    color: #8c8c8c;
    height: 2px;
    background: #a7a7a7;
    box-shadow: 0px 0px 4px 0px #00000040;
    opacity: 0.4;
    margin: 0 0 1rem 0;
}
.progress {
    height: 6px;
    background: #e5e5e5;
    border-radius: 10px;
}
.progress-bar {
    background: #fbbc05;
    border-radius: 10px;
}
.metric-box {
    width: 220px;
}


#main {
    .card {
        background: linear-gradient(90deg, #FFFBEE 0%, #FFFFFF 51.75%);
        border: 1px solid var(--Primary_Yellow, #D4AF37);
    }
    .card img {
        width: 15rem;
        height: 15rem;
        object-fit: contain;
    }
    .card img.active {
        height: 20rem;
    }
    .image_contain img, .text_contain, .outer_contain, .card {
        transition: all 1s ease;
    }
    .view_more, .less_more {
        cursor: pointer;
    }
    .visible_text, .hidden_text {
        transition: opacity 0.3s ease;
    }
}
.metric-box {
    width: 100%;
    /* max-width: 450px; */
    /* background: #fff; */
    /* padding: 15px; */
    border-radius: 12px;
    /* box-shadow: 0 0 15px rgba(0,0,0,0.08); */
}

.metric {
    margin-bottom: 15px;
}

.metric-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 6px;
}

.progress {
    height: 8px;
    background: #e6e9ef;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 10px;
}

/* Speed */
.progress-bar.fast { width: 100%; background: #28a745; }
.progress-bar.avg  { width: 60%;  background: #ffc107; }
.progress-bar.slow { width: 30%;  background: #dc3545; }

/* Loan Amount */
.progress-bar.max { width: 100%; background: #4f46e5; }
.progress-bar.mid { width: 60%;  background: #6366f1; }
.progress-bar.min { width: 30%;  background: #818cf8; }

/* Interest Rate (LOW is good) */
.progress-bar.low  { width: 100%; background: #22c55e; }
.progress-bar.med  { width: 60%;  background: #facc15; }
.progress-bar.high { width: 30%;  background: #ef4444; }

/* Trust Score */
.progress-bar.top     { width: 100%; background: #16a34a; }
.progress-bar.fav     { width: 85%;  background: #22c55e; }
.progress-bar.trusted { width: 70%;  background: #4ade80; }
.progress-bar.known   { width: 50%;  background: #a3e635; }
.progress-bar.unrated { width: 20%;  background: #f87171; }

@media(max-width: 1024px) {
    #main {
        .card img {
            width: 10rem;
            height: 10rem;
        }
    }
    .banner {
        min-height: 260px!important;
    }
    .banner_11 {
        min-height: 260px!important;
    }
}
@media(max-width: 600px) {
    .banner_11 {
        background-size: 50% 100%, 110% 100%!important;
    }
    .banner {
        background-size: 100% 100%!important;
    }
}

/* card animation */
.first_card,
.second_card {
    transition: border-radius .4s ease, box-shadow .3s ease;
}

/* image smooth */
.image_contain img {
    transition: all .45s ease;
}

/* smooth text reveal */
.hidden_text {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .5s ease, opacity .35s ease, transform .35s ease;
    display: block; /* important */
}

.hidden_text.show {
    max-height: 1200px;
    opacity: 1;
    transform: translateY(0);
}

.visible_text {
    transition: opacity .25s ease;
}

.visible_text.hide {
    opacity: 0;
}

/* disable animation helper */
.no-transition * {
    transition: none !important;
}