.map-frame {
    border-radius: 20px; 
    overflow: hidden;
    border: 5px solid #fff;
    transition: transform 0.3s ease;
}
.map-section-new > div {
    padding: 0 2px !important; 
}

.map-frame:hover {
    transform: translateY(-5px);
}
@media (max-width: 991px) {

    /* 1. Map ki height kam karne ke liye iframe ko target kiya */
    .map-frame iframe {
        height: 500px !important; /* Desktop par ye badi hogi, mobile par 250px-300px perfect hai */
    }

    /* 2. Map container ki spacing aur border adjust ki */
    .map-frame {
        border-radius: 15px !important; /* Mobile par thoda kam round acha lagta hai */
        border-width: 3px !important; /* Border patla kiya taaki screen space bache */
        margin-bottom: 20px !important;
    }

    /* 3. Side padding handle ki taaki map edges se na chipke */
    .map-section-new .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .map-section-new > div {
        padding: 0 5px !important; 
    }
}