@media(max-width:1300px) {
    .products-button {
        display: none;
    }
}

@media (max-width:992px) {
    .navbar-brand {
        font-size: 16px;
        font-weight: 700;
    }

    /* Toggler button */
    .navbar-toggler {
        padding: 4px 8px;
        border: none;
        outline: none;
    }

    /* Collapse menu */
    .navbar-collapse {
        padding: 12px;
        margin-top: 8px;
        border-radius: 6px;
    }

    /* Menu alignment */
    .navbar-nav {
        text-align: center;
    }

    /* Links */
    .navbar-nav .nav-link {
        padding: 10px 0;
        font-size: 15px;
        font-weight: 600;
    }

    /* Disable hover underline on mobile */
    .navbar-nav .nav-link::after {
        display: none;
    }

    [type=button]:not(:disabled),
    [type=reset]:not(:disabled),
    [type=submit]:not(:disabled),
    button:not(:disabled) {
        cursor: pointer;
        border: 1px solid #dfe6e9;
        outline: none;
        background-color: #f9f9f9;
    }

    .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        transition: width 0.3s ease;
        display: none;
    }

    .navbar-nav .nav-link:hover::after {
        width: 100%;
        display: none;
    }

    .products-button {
        display: none;
    }

    .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        color: var(--bs-modal-color);
        pointer-events: auto;
        background-color: var(--bs-modal-bg);
        background-clip: padding-box;
        top: 10px;
        border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
        border-radius: var(--bs-modal-border-radius);
        outline: 0;
    }

}

@media (max-width: 768px) {

    .about_section {
        padding: 40px 10px;
    }

    .about_section .heading_container {
        text-align: center;
        margin-bottom: 30px;
    }

    .about_section .heading_container h2 {
        font-size: 26px;
    }

    .about_section .heading_container h2::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Stack layout cleanly */
    .about_section .row {
        flex-direction: column;
    }

    .about_section .col-md-6 {
        padding: 0 15px;
    }

    /* IMAGE FIX (MOST IMPORTANT) */
    .about_section .img_container {
        margin-bottom: 20px;
    }

    .about_section .img_container .img-box img {
        width: 100%;
        height: 220px;
        /* 👈 LIMIT HEIGHT */
        object-fit: cover;
        /* 👈 CROPS NICELY */
        border-radius: 8px;
    }

    /* Content box */
    .about_section .detail-box {
        margin-left: 0;
        padding: 22px;
        border-radius: 8px;
    }

    .about_section .detail-box h3 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 15px;
    }

    .about_section .detail-box p {
        font-size: 14px;
        line-height: 1.7;
        text-align: left;
    }

    /* Brand */
    .navbar-brand {
        font-size: 16px;
        font-weight: 700;
    }

    /* Toggler button */
    .navbar-toggler {
        padding: 4px 8px;
        border: none;
        outline: none;
    }

    /* Collapse menu */
    .navbar-collapse {
        padding: 12px;
        margin-top: 8px;
        border-radius: 6px;
    }

    /* Menu alignment */
    .navbar-nav {
        text-align: center;
    }

    /* Links */
    .navbar-nav .nav-link {
        padding: 10px 0;
        font-size: 15px;
        font-weight: 600;
    }

    /* Disable hover underline on mobile */
    .navbar-nav .nav-link::after {
        display: none;
    }

    [type=button]:not(:disabled),
    [type=reset]:not(:disabled),
    [type=submit]:not(:disabled),
    button:not(:disabled) {
        cursor: pointer;
        border: none;
        outline: none;
        background-color: #ffffff00;
    }

    .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        transition: width 0.3s ease;
        display: none;
    }

    .navbar-nav .nav-link:hover::after {
        width: 100%;
        display: none;
    }

    /* Navbar */
    .products-button {
        display: none;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .about_section .img_container .img-box {
        border-radius: 15px;
        overflow: hidden;
        background: #fff;
    }

    .about_section .img_container .img-box img {
        height: 200px;
        width: 100%;
        object-fit: contain;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        color: #0b1d4d;
    }

    /* Navbar */
    .hero {
        min-height: 100vh;
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
            url("./images/bg.jpg");
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        color: #ffffff;
    }


    /* Brand */
    .navbar-brand {
        font-size: 16px;
        font-weight: 700;
    }

    /* Toggler button */
    .navbar-toggler {
        padding: 4px 8px;
        border: none;
        outline: none;
    }

    /* Collapse menu */
    .navbar-collapse {
        padding: 12px;
        margin-top: 8px;
        border-radius: 6px;
    }

    /* Menu alignment */
    .navbar-nav {
        text-align: center;
    }

    /* Links */
    .navbar-nav .nav-link {
        padding: 10px 0;
        font-size: 15px;
        font-weight: 600;
    }

    /* Disable hover underline on mobile */
    .navbar-nav .nav-link::after {
        display: none;
    }

    [type=button]:not(:disabled),
    [type=reset]:not(:disabled),
    [type=submit]:not(:disabled),
    button:not(:disabled) {
        cursor: pointer;
        border: none;
        outline: none;
        background-color: #ffffff00;
    }

    nav.navbar.navbar-expand-lg.main-navbar {
        padding: 0px;
    }

    .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        transition: width 0.3s ease;
        display: none;
    }

    .navbar-nav .nav-link:hover::after {
        width: 100%;
        display: none;
    }

    /* Navbar */
    .address {
        background: #ffffff;
        padding: 20px;
        max-height: 450px;
        overflow-y: auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin-top: 20px;
    }

    .top-header {
        display: none;
        background: #0b1d4d;
        color: white;
        padding: 8px 0;
        font-size: 14px;
    }


}