/* Additional responsive styles for navbar spacing */

/* For 768-991px screens - 150% zoom */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .social-icons.me-5 {
        margin-right: 0.3rem !important;
    }

    .nav-link {
        padding: 5px 3px !important;
        font-size: 10px !important;
    }

    .nav-link img {
        height: 18px !important;
        width: 18px !important;
    }

    .dropdown-toggle::after {
        display: none !important;
    }
}

/* For 991-1200px screens - 150% zoom on larger screens */
@media only screen and (min-width: 991px) and (max-width: 1200px) {
    .social-icons.me-5 {
        margin-right: 0.5rem !important;
    }

    .nav-link {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }

    .nav-link img {
        height: 20px !important;
        width: 20px !important;
    }

    .dropdown-toggle::after {
        margin-left: 0.15em !important;
    }
}

/* For 1200-1300px screens - 125% zoom */
@media only screen and (min-width: 1200px) and (max-width: 1300px) {
    .social-icons.me-5 {
        margin-right: 1.5rem !important;
    }

    .nav-link {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
}

/* For 1300-1400px screens - 110% zoom */
@media only screen and (min-width: 1300px) and (max-width: 1400px) {
    .social-icons.me-5 {
        margin-right: 2rem !important;
    }

    .nav-link {
        padding: 9px 7px !important;
        font-size: 14px !important;
    }
}