/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;scroll-behavior:smooth;}
body{
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    background:#fff;color:#333;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ========================= HEADER ========================= */
.bankstore-header{
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    position:sticky;top:0;z-index:999;width:100%;
}

.header-inner{
    max-width:1250px;margin:auto;
    padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;
}

.logo img{height:42px;width:auto;}

.nav-links{
    display:flex;align-items:center;gap:18px;
    position:relative;
}

.nav-links a{
    text-decoration:none;color:#2a1f4f;
    font-weight:500;font-size:15px;
    transition:.3s;
}
.nav-links a:hover{color:#0071bc;}

.contact-btn{
    background:#0071bc;color:#fff!important;
    padding:8px 20px;border-radius:25px;
    font-weight:600;transition:.3s;
}
.contact-btn:hover{background:#22b5f3;}

.dropdown{position:relative;}

.dropbtn{
    background:none;border:none;cursor:pointer;
    color:#2a1f4f;font-weight:500;font-size:15px;
    display:flex;align-items:center;
    transition:.3s;
}
.dropbtn:hover{color:#0071bc;}

.dropdown-content{
    position:absolute;top:100%;left:0;
    background:#fff;
    min-width:210px;border-radius:6px;
    box-shadow:0 6px 20px rgba(0,0,0,.1);
    display:none;flex-direction:column;
    padding:10px 0;z-index:9999;
}
.dropdown-content a{
    padding:15px 15px;
    color:#2a1f4f;text-decoration:none;
}
.dropdown-content a:hover{
    background:#f3f8ff;color:#0071bc;
}

/* FIX: Clean dropdown opening */
.dropdown:hover > .dropdown-content{display:flex;}

.menu-toggle{
    display:none;font-size:28px;
    cursor:pointer;color:#0071bc;
}

.language-box{margin-left:15px;}
.language-box select{
    padding:6px 10px;border-radius:6px;
    border:1px solid #ddd;font-size:14px;
}

/* ============= MOBILE HEADER ============= */
@media(max-width:992px){
    .menu-toggle{display:block;}

    .nav-links{
        display:none;flex-direction:column;
        position:absolute;top:70px;right:0;
        width:100%;background:#fff;
        box-shadow:0 6px 15px rgba(0,0,0,.1);
        padding:20px 0;
        z-index:9999;
    }
    .nav-links.active{display:flex;}

    .nav-links a,.dropbtn{
        width:100%;text-align:center;
        padding:12px 0;
        border-bottom:1px solid #eee;
    }

    .dropdown-content{
        position:relative;top:0;left:0;
        box-shadow:none;padding:0;
        background:#fff;
        width:100%;
    }

    .dropdown-content a{
        border-bottom:1px solid #eee;
    }

    .contact-btn{
        margin:10px auto;
    }
}


/* ========================= HERO SECTION ========================= */
.home-loan-hero-section{
    padding:60px 5%;background:#fff;width:100%;
}
.hero-container{max-width:1400px;margin:0 auto;}

.home-loan-hero{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:50px;align-items:center;
}

.hero-content-left{position:relative;}

.hero-title{
    font-size:2.5em;color:#1a1a1a;
    font-weight:700;line-height:1.2;
    margin-bottom:20px;
}

.hero-subtitle{
    font-size:1.05em;color:#555;
    line-height:1.7;margin-bottom:35px;
}

.hero-illustration{
    display:flex;align-items:center;
    gap:30px;margin-bottom:35px;
}

.illustration-img{
    width:200px;height:auto;flex-shrink:0;
}

.exclusive-box{
    background:linear-gradient(135deg,#f8f9ff,#e8f0ff);
    border-radius:16px;padding:25px;
    border-left:4px solid #0071bc;
}

.exclusive-title{
    font-size:1.4em;color:#1a1a1a;
    font-weight:700;margin-bottom:18px;
}
.exclusive-title .highlight{color:#0071bc;}

.benefit-list{display:flex;flex-direction:column;gap:12px;}

.benefit-item{
    display:flex;align-items:flex-start;
    gap:12px;font-size:.98em;color:#333;
}

.benefit-icon{
    width:24px;height:24px;border-radius:50%;
    background:linear-gradient(135deg,#0071bc,#4a90e2);
    display:flex;align-items:center;justify-content:center;
}

.hero-form-card{
    background:#fff;border-radius:20px;
    padding:35px;
    box-shadow:0 10px 40px rgba(0,0,0,.12);
    border:1px solid #e8e8e8;
    position:sticky;top:80px;
}

.form-header{text-align:center;margin-bottom:25px;}
.form-title{font-size:1.5em;color:#1a1a1a;font-weight:700;}
.form-subtitle{font-size:.92em;color:#666;}

.hero-form{display:flex;flex-direction:column;gap:16px;}

.form-group{position:relative;}

.form-input{
    width:100%;padding:14px 16px;
    border:2px solid #e0e0e0;border-radius:10px;
    font-size:.95em;color:#333;transition:.3s;
}

.form-input:focus{
    outline:none;border-color:#0071bc;
    box-shadow:0 0 0 4px rgba(0,113,188,.1);
}

.phone-input-wrapper{
    display:flex;gap:10px;align-items:center;
}

.country-code{
    display:flex;align-items:center;
    gap:8px;padding:14px 12px;
    border:2px solid #e0e0e0;border-radius:10px;
    background:#f8f9fa;font-size:.95em;
}

.submit-btn{
    background:linear-gradient(135deg,#0071bc,#4a90e2);
    color:#fff;padding:16px;border:none;
    border-radius:10px;font-weight:600;
    cursor:pointer;transition:.3s;margin-top:8px;
}
.submit-btn:hover{
    background:linear-gradient(135deg,#005b99,#357abd);
    transform:translateY(-2px);
}

/* ========================= FOOTER ========================= */
.main-footer{
    background:#0a3d62;color:#fff;
    padding:60px 5% 20px;width:100%;
}

.footer-container{max-width:1400px;margin:0 auto;}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:40px;margin-bottom:30px;
}

.footer-section h3{
    color:#22b5f3;margin-bottom:10px; font-size: 20px;
}

.footer-section p,
.footer-section ul{line-height:1.8;font-size:.95em;}

.footer-section ul{list-style:none;padding:0;}
.footer-section ul li{margin-bottom:8px;}

.footer-section a{
    color:#fff;text-decoration:none;transition:.3s;
}
.footer-section a:hover{color:#22b5f3;}

.footer-bottom{
    background:#082d47;color:#fff;
    text-align:center;padding:20px 5%;
}


/* ========================= POPUP ========================= */
#exitPopupOverlay{
    display:none;position:fixed;inset:0;
    width:100%;height:100%;
    background:rgba(0,0,0,.55);
    z-index:99999;
}

#exitPopupBox{
    width:650px;max-width:95%;
    margin:80px auto;background:#fff;
    border-radius:12px;
    display:flex;overflow:hidden;
    animation:popupShow .35s ease-out;
}

@keyframes popupShow{
    from{transform:scale(.85);opacity:0;}
    to{transform:scale(1);opacity:1;}
}

.popup-left{flex:1;padding:25px;}

.popup-left h3{font-size:22px;color:#1a1a1a;margin-bottom:10px;}
.popup-left p{font-size:14px;color:#555;margin-bottom:15px;}

.popup-left input{
    width:100%;padding:11px;margin-bottom:12px;
    border:1px solid #ccc;border-radius:6px;font-size:14px;
}

.popup-left button{
    width:100%;padding:12px;border:none;
    background:#007bff;color:#fff;border-radius:6px;
    font-weight:600;cursor:pointer;transition:.2s;
}
.popup-left button:hover{background:#005fcc;}

.popup-right{
    flex:1;background:#f0f4ff;
    display:flex;align-items:center;
    justify-content:center;
}

.popup-right img{width:100%;object-fit:cover;}

@media(max-width:768px){
    #exitPopupBox{flex-direction:column;}
    .popup-right{height:180px;}
}


/* ========================= RESPONSIVE ========================= */
@media(max-width:1024px){
    .home-loan-hero{
        grid-template-columns:1fr;
        gap:40px;
    }
    .hero-form-card{
        position:static;max-width:500px;
        margin:0 auto;
    }
    .hero-illustration{flex-direction:column;}
    .illustration-img{width:160px;}
}

@media(max-width:768px){
    .hero-title{font-size:2em;}
    .hero-subtitle{font-size:.98em;}
    .exclusive-title{font-size:1.2em;}

    .hero-form-card{padding:25px;}
    .form-title{font-size:1.3em;}

    .phone-input-wrapper{flex-direction:column;}
    .country-code{width:100%;justify-content:center;}

    .footer-grid{
        grid-template-columns:1fr;gap:30px;
    }
}

@media(max-width:480px){
    .home-loan-hero-section{padding:40px 4%;}
    .hero-title{font-size:1.75em;}
    .hero-subtitle{font-size:.92em;}
    .illustration-img{width:140px;}
    .exclusive-box{padding:20px;}
    .hero-form-card{padding:20px;}
}