.loan-calculator-pages-hero {
    position: relative;
    background-image: url('/images/svg/calculator-coins-svgrepo-com.svg');
    /* background-image: url('/images/svg/Group-23364.svg'); */
    background-repeat: no-repeat; 
    background-size: contain; 
    /* background-size: 30%;  */
    background-position: right; 
    height: 500px; 
    width: 100%; 
    display: flex;
    align-items: center;
}

.loan-calculator-pages-hero::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient overlay */
    background: linear-gradient(135deg, #ECF2FE, #D0E9ED); 
    opacity: 0.7;
    z-index: -1;
}

.loan-calculator-pages-hero-container{
    width: 50%;
}

.loan-calculator-pages-hero-container .hero-button{
    min-width: 350px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    font-size: 13px;
    color: rgb(44, 44, 44)!important;
}

.loan-calculator-pages-hero-container .hero-button i{
    font-size: 12px;
    color: rgb(44, 44, 44)!important;
}

.loan-calculator-pages-hero-container p{
    font-size: 14px;
}


@media (max-width: 939px) {
    .loan-calculator-pages-hero {
        background-size: 50%; /* Reduce the size of the background image */
        background-position: right;
        min-height: 300px;
    }
}

@media (max-width: 774px) {

    .loan-calculator-pages-hero {
        backdrop-filter:blur(3px) ;
    }

    .loan-calculator-pages-hero-container {
        width: 80%;
    }

    label .form-label{
        font-size: 12px!important;
    }

}

@media (max-width: 600px) {
    
    .loan-calculator-pages-hero-container .hero-button{
        min-width: 80%;
    }
    .loan-calculator-pages-hero-container p{
        font-size: 12px;
    }

}

@media (max-width: 450px) {

    .loan-calculator-pages-hero {
        height: 420px; 
    }

}