/* ==========================================================================
   Dimond AgroVet Engine Layout Breakdown System (Responsive Design)
   ========================================================================== */

@media (max-width: 1100px) {
    .hero-title { font-size: 3.2rem; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}

@media (max-width: 991px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; gap: 40px; }
    
    .capability-row-item, .capability-row-item.inverse { flex-direction: column; gap: 30px; }
    .capability-media { max-width: 100%; width: 100%; }
    
    .gallery-masonry-grid { grid-template-columns: repeat(2, 1fr); }
    .newsletter-flex { flex-direction: column; text-align: center; align-items: stretch; }
    .newsletter-text { text-align: center; }
}

@media (max-width: 768px) {
    body { font-size: 15px; }
    .py-100 { padding: 60px 0; }
    
    .top-bar { display: none; }
    
    .mobile-toggle-btn { display: block; }
    
    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        border-top: 1px solid #ECEEEB;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        padding: 20px;
        display: none;
    }
    .navbar-menu.mobile-open { display: block; }
    .nav-links { flex-direction: column; gap: 18px; text-align: center; }
    .header-action-btn { display: none; }
    
    .hero-slider-section { height: 560px; }
    .hero-title { font-size: 2.3rem; }
    .hero-desc { font-size: 1rem; }
    .slider-arrow { width: 45px; height: 45px; font-size: 0.95rem; }
    .prev-arrow { left: 10px; }
    .next-arrow { right: 10px; }
    
    .section-title { font-size: 2rem; }
    
    .counter-number { font-size: 2.5rem; }
    .counter-suffix { font-size: 1.8rem; }
    
    .footer-copyright-flex { flex-direction: column; gap: 15px; text-align: center; }
}

@media (max-width: 576px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .gallery-masonry-grid { grid-template-columns: 1fr; }
    
    .hero-title { font-size: 1.9rem; }
    .hero-actions { display: flex; flex-direction: column; gap: 12px; }
    .hero-actions .btn { margin-right: 0; text-align: center; }
    
    .contact-form-wrapper { padding: 25px; }
    .newsletter-inline-form { flex-direction: column; }
}