/* ---- Mobile Responsive ---- */
@media (max-width: 1024px) {
    .web-navbar .menu{
        display: none;
    }

    .web-navbar{
        padding: 0px 0px;
        height: auto;
    }

    #pull{
        display: block;
    }

    .logo{
        width: 130px;
    }

    .logo a{
        padding: 18px 0px;
    }

    .page-banner{
        min-height: 400px;
    }

    .content{
        padding-top: 60px;
    }
    
}

@media (max-width: 768px) {

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

    .global-title {
        font-size: 1.4rem;
    }

    .global-tab-btn {
        font-size: 0.7rem;
        padding: 0.45rem 1.1rem;
    }

    .point-dot {
        width: 9px;
        height: 9px;
    }

    .point-label {
        font-size: 0.62rem;
        padding: 0.28rem 0.65rem;
        /* On mobile, show label below the dot to avoid clipping */
        bottom: auto;
        top: calc(100% + 8px);
        transform: translateX(-50%) translateY(-4px);
    }

    .point-label::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: #1a6faf;
    }

    .map-point:hover .point-label {
        transform: translateX(-50%) translateY(0);
    }

    .footer-main .row {
        gap: 2rem 0;
    }

    .footer-desc {
        font-size: 0.875rem;
    }

    .industry-image{
        width: 100%;
    }

    .industry-card{
        position: relative;
    }

    .industry-section-pharmacy .industry-image{
        width: 100%;
    }

    .industry-section-pharmacy .industry-card{
        position: relative;
        max-width: 100%;
    }


    .hero-content h1{
        font-size: 38px;
    }

    .industry-section-pharmacy{
        padding: 60px 0px;
    }

    .industry-card h3{
        font-size: 30px;
    }

    .industry-section-pharmacy .industry-wrapper{
        display: block;
    }

    .section-header h2{
        font-size: 28px;
    }

    .section-header .subtitle{
        font-size: 16px;
        line-height: 1.6;
    }

    .home-about-section{
        padding: 60px 0px;
    }

    .product-section{
        padding: 50px 0px;
    }

    .text-20{
        font-size: 16px;
    }

    .benefit-card h4{
        font-size: 16px;
    }

    .benefit-card .benefit-content{
        font-size: 16px;
    }

    .product-industry-section .section-content{
        padding: 30px;
    }

    .industry-application{
        margin-top: 0px;
        padding: 30px;
    }

    .about-vision-section .section-content{
        padding: 0px 30px;
    }

    .history-thumb{
        display: none;
    }

    .contact-form-wrapper{
        padding: 30px;
    }
}

@media (max-width: 480px) {
    .global-title {
        font-size: 1.15rem;
    }

    .point-dot {
        width: 7px;
        height: 7px;
    }

    .point-label {
        font-size: 0.58rem;
        padding: 0.22rem 0.5rem;
    }
}