/* ==========================================
   BANK CSP - COMPLETE RESPONSIVE CSS
   ========================================== */

/* 1. Navbar & Header Fixes */
.header-section .navbar {
    padding: 8px 0;
}

/* Tablet ke liye (Max width 991px) */
@media (max-width: 991px) {
    .header-section .navbar-toggler {
        display: block !important; /* Mobile menu button dikhane ke liye */
        padding: 8px;
        background: var(--hover-color);
        border-radius: 5px;
        border: none;
    }

    .header-section .navbar-toggler:focus {
        box-shadow: none;
    }

    .header-section .navbar-toggler i {
        color: #fff; /* Toggler icon ka color white */
    }

    .navbar-collapse {
        background: #fff;
        padding: 20px;
        margin-top: 10px;
        box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    }
}

/* 2. Mobile Typography & Layout (Max width 767px) */
@media (max-width: 767px) {
    h1 {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Images screen se bahar na jayein */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Spacing fixes */
    .pt-120 { padding-top: 60px !important; }
    .pb-120 { padding-bottom: 60px !important; }
}

/* 3. Small Mobile (Max width 480px) */
@media (max-width: 480px) {
    .header-area {
        text-align: center;
    }
    
    .section-header h2 {
        font-size: 20px !important;
    }

    .cmn-btn {
        padding: 10px 20px !important;
        font-size: 14px;
    }
}