body{

font-family:'Poppins',sans-serif;

background:#f7f9fc;

}

.navbar-brand{

font-size:28px;

}

.hero{

padding:80px 0;

}

.hero h1{

line-height:1.2;

}

.feature-box{

background:#fff;

padding:20px;

border-radius:15px;

text-align:center;

box-shadow:0 5px 20px rgba(0,0,0,.08);

transition:.3s;

}

.feature-box:hover{

transform:translateY(-5px);

}

.hero-card{

background:#fff;

padding:20px;

border-radius:20px;

}

.hero-card img{

width:100%;

border-radius:15px;

}
```

/* Loading Overlay */

.loading-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(255,255,255,.85);

display:none;

align-items:center;

justify-content:center;

z-index:9999;

}


.loader-box{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:0 10px 40px rgba(0,0,0,.15);

}


/* Success Icon */

.success-icon i{

font-size:70px;

color:#198754;

}

```css id="v9g3u1"
/*
================================================
Loan Portal Professional UI Styling
================================================
*/


/* Global */

*{
    box-sizing:border-box;
}


body{

    font-family:'Poppins',sans-serif;

    color:#1f2937;

    overflow-x:hidden;

}


/* Navbar */

.navbar{

    backdrop-filter:blur(10px);

}


.navbar .nav-link{

    font-weight:500;

    margin:0 8px;

    transition:.3s;

}


.navbar .nav-link:hover{

    color:#0d6efd;

}



/* Hero */

.hero{

    background:
    linear-gradient(
    135deg,
    #f8fbff,
    #eef5ff
    );

    min-height:650px;

    display:flex;

    align-items:center;

}



.hero h1{

    color:#0f172a;

    font-weight:700;

}



.hero p{

    font-size:17px;

    line-height:1.7;

}



/* Buttons */

.btn-primary{

    background:#0d6efd;

    border:none;

    padding:13px 30px;

    font-weight:600;

    transition:.3s;

}


.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 25px
    rgba(13,110,253,.25);

}



/* Form Card */

.card{

    overflow:hidden;

}


.card-header{

    background:
    linear-gradient(
    135deg,
    #0d6efd,
    #0047b3
    ) !important;

}



/* Form Controls */


.form-control,
.form-select{

    height:58px;

    border-radius:12px;

    border:1px solid #dbe3ef;

}


.form-control:focus,
.form-select:focus{

    border-color:#0d6efd;

    box-shadow:
    0 0 0 .25rem
    rgba(13,110,253,.15);

}



/* Floating Labels */

.form-floating label{

    color:#64748b;

}



/* Slider */

.form-range{

    height:8px;

    cursor:pointer;

}



/* Feature Cards */

.feature-box{

    transition:.35s ease;

}



.feature-box:hover{

    transform:
    translateY(-8px);

}



/* Loading Overlay */

.loading-overlay{

    backdrop-filter:
    blur(5px);

}



/* Success Modal */

.modal-content{

    box-shadow:
    0 20px 60px
    rgba(0,0,0,.15);

}



/* Footer */

footer{

    background:#0f172a;

    color:white;

}



/* Mobile Responsive */

@media(max-width:991px){


.hero{

    padding:60px 0;

    text-align:center;

}


.hero h1{

    font-size:38px;

}


.hero-card{

    margin-top:40px;

}


}



@media(max-width:576px){


.hero h1{

    font-size:30px;

}


.display-4{

    font-size:2rem;

}


.card-body{

    padding:25px !important;

}


.btn-lg{

    width:100%;

}


}



/* Animation */

@keyframes fadeUp{


from{

opacity:0;

transform:
translateY(30px);

}


to{

opacity:1;

transform:
translateY(0);

}


}



.hero .container{

animation:
fadeUp .8s ease;

}
```