/* GLOBAL RESET */
html,body{
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    scroll-behavior:smooth;
}
body{
    font-size:16px;
    line-height:1.55;
    color:#222;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
img,svg{
    max-width:100%;
    height:auto;
    display:block;
}

/* GLOBAL CONTAINER FIX */
.header-inner,
.hero-container,
.footer-container,
.bs-container{
    padding-left:4.5%;
    padding-right:4.5%;
    margin-left:auto;
    margin-right:auto;
}

@media(min-width:1200px){
    .header-inner,
    .hero-container,
    .footer-container,
    .bs-container{
        max-width:1200px;
        padding-left:0;
        padding-right:0;
    }
}

/* MENU TOGGLE */
.menu-toggle{
    box-sizing:content-box;
    -webkit-tap-highlight-color:transparent;
    padding:6px;
    line-height:1;
    user-select:none;
}

/* ================= MOBILE NAVIGATION FIX ================= */
.nav-links{
    align-items:center;
    gap:18px;
}

@media(max-width:992px){
    .nav-links{
        position:fixed;
        top:70px;
        right:0; left:0;
        width:100%;
        background:#fff;
        padding:22px 6%;
        z-index:99999;
        border-top:1px solid rgba(0,0,0,.05);
        flex-direction:column;

        /* Smooth dropdown animation */
        transform:translateY(-20px);
        opacity:0;
        visibility:hidden;
        transition:transform .28s ease, opacity .28s ease, visibility .28s;
        box-shadow:0 10px 30px rgba(8,13,30,.06);
        border-bottom-left-radius:12px;
        border-bottom-right-radius:12px;
    }
    .nav-links.active{
        transform:translateY(0);
        opacity:1;
        visibility:visible;
    }

    .nav-links a,
    .dropbtn{
        display:block;
        width:100%;
        padding:14px 0;
        font-size:16px;
        border-bottom:1px solid #eee;
        text-align:center;
    }

    /* Dropdown inside mobile view should stack clean */
    .dropdown-content{
        position:relative!important;
        display:block!important;
        background:#fff!important;
        padding:0!important;
        box-shadow:none!important;
        width:100%!important;
    }

    .dropdown-content a{
        padding:12px 0;
        border-bottom:1px solid #eee;
    }
}

@media(max-width:480px){
    .bankstore-header{padding:8px 2%;}
    .logo img{height:34px;}
}

/* ================= HERO RESPONSIVE ================= */
.home-loan-hero{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:42px;
    align-items:start;
}

/* Slight shrink for medium screens */
@media(max-width:1200px){
    .home-loan-hero{
        grid-template-columns:1fr 360px;
        gap:32px;
    }
}

/* Stack on tablet */
@media(max-width:1024px){
    .home-loan-hero{
        grid-template-columns:1fr;
        gap:28px;
    }
    .hero-form-card{
        position:static!important;
        top:0!important;
        max-width:650px;
        margin:0 auto;
    }
    .hero-title{font-size:2.05rem;}
}

/* Form elements */
.form-input,
.country-code{
    min-height:46px;
    font-size:15px;
    padding:12px 14px;
}
.submit-btn,
.btn-submit{
    padding:14px 18px;
    min-height:48px;
    font-size:1rem;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.hero-illustration{
    gap:18px;
    align-items:center;
    margin-bottom:24px;
}

.exclusive-box{
    padding:18px;
    border-radius:14px;
}

.benefit-item .benefit-icon{
    width:30px;
    height:30px;
    margin-top:0;
}

/* Slight lift for larger desktop */
@media(min-width:1280px){
    .hero-form-card{
        top:100px;
    }
}

/* ================= FOOTER ================= */
.footer-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

@media(max-width:1024px){
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:28px;
    }
}

@media(max-width:768px){
    .footer-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
    .footer-bottom{
        text-align:center;
        padding:18px 6%;
    }
}

/* ================= CONTACT + BUSINESS GRID ================= */
.contact-grid,
.bs-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

@media(max-width:900px){
    .contact-grid,
    .bs-grid{
        grid-template-columns:1fr;
    }
}

/* ================= EMI BOX ================= */
.emi-box{
    display:flex;
    gap:18px;
    align-items:stretch;
    flex-wrap:wrap;
}

@media(max-width:900px){
    .emi-box{
        flex-direction:column;
    }
    .emi-left,
    .emi-right{
        width:100%;
    }
}

/* ================= FAQ ================= */
.faq-container{padding:10px;}
.faq-question{
    font-size:15px;
    padding:14px 16px;
}
.faq-answer{
    padding:12px 16px;
    font-size:15px;
}

/* ================= MAP ================= */
.bs-map-wrapper iframe{height:360px;}

@media(max-width:480px){
    .bs-map-wrapper iframe{height:260px;}
}

/* ================= HERO TITLE ADJUSTMENTS ================= */
h1.hero-title{
    font-size:2.25rem;
    line-height:1.12;
}
@media(max-width:1024px){
    h1.hero-title{font-size:1.9rem;}
}
@media(max-width:480px){
    h1.hero-title{font-size:1.6rem;}
}

/* ================ GENERAL MOBILE OPTIMIZATION ================= */
a{-webkit-tap-highlight-color:rgba(0,0,0,.06);}
button,input,select,textarea{-webkit-appearance:none;}

.social-icons .social{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.contact-item,
.bs-box,
.feature-card,
.eligibility-card{
    transition:transform .28s ease, box-shadow .28s ease;
}

.contact-item:hover,
.bs-box:hover,
.feature-card:hover,
.eligibility-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(14,32,80,.08);
}

.form-row input,
.form-row select{
    min-width:0;
}

/* XS SCREEN FIX */
@media(max-width:360px){
    .header-inner,
    .hero-container{
        padding-left:3%;
        padding-right:3%;
    }
}

*{word-wrap:break-word;}
