/* ===== Navbar ===== */
.navbar { background-color: #212529 !important; padding: 0.8rem 1rem; }
.navbar-brand span { font-size: 1.5rem; font-weight: bold; color: white; }
.navbar-nav .nav-link { color: white; margin-left: 0.8rem; transition: color 0.3s; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: #0d6efd; }

/* ===== Hero Section ===== */
.hero { background: url("../assets/loan-bg.jpg") center/cover no-repeat; height: 33vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white; padding: 20px; position: relative; }
.hero::after { content: ""; position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); z-index:1; }
.hero-content { position: relative; z-index:2; }
.hero h1 { font-size: 3rem; font-weight:bold; margin-bottom:20px; }
.hero p { font-size:1.2rem; margin-bottom:30px; }

/* ===== Bank Logos ===== */
.bank-slider { width:100%; overflow:hidden; padding:20px 0; background:#f8f9fa; }
.bank-track { display:flex; gap:30px; animation: scroll 20s linear infinite; }
.bank-track img { max-width:150px; height:auto; object-fit:contain; filter: grayscale(100%); transition: all 0.3s ease; }
.bank-track img:hover { filter: grayscale(0%); transform: scale(1.1); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===== Benefits & Steps ===== */
.benefit-icon { font-size:3rem; color:#007bff; margin-bottom:15px; }
.step-icon { font-size:2.5rem; color:#0d6efd; margin-bottom:15px; }

/* ===== Preloader ===== */
#preloader { position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:9999; transition: opacity 0.6s ease, visibility 0.6s ease; }
#preloader p { margin-top:10px; font-weight:bold; color:#0d6efd; }
.fade-out { opacity:0; visibility:hidden; }

/* ===== Footer ===== */
footer { background:#212529; color:white; padding:40px 20px; text-align:center; }
footer a { color:#0d6efd; text-decoration:none; margin:0 5px; }
footer a:hover { text-decoration:underline; }

/* ===== Responsive ===== */
@media(max-width:768px){ .hero h1{ font-size:2rem; } .hero p{ font-size:1rem; } .hero a.btn{ font-size:1rem; padding:0.5rem 1rem; } }
@media(max-width:576px){ .bank-track img{ max-width:120px; } }