/**
 * RR Infraprojects - Responsive Stylesheet
 */

/* Tablets & Smaller Desktop */
@media (max-width: 1024px) {
    .stats-wrap {
        grid-template-columns: repeat(2, 1fr);
        margin-top: -30px;
    }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid var(--color-border); padding-bottom: 20px; }
    .stat-item:nth-child(3), .stat-item:nth-child(4) { padding-top: 20px; }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .top-bar-info { display: none; } /* Hide extra info on mobile to save space */
    
    .main-header .container { height: 70px; }
    .logo img { height: 40px; }

    .mobile-menu-btn { display: block; }
    
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--color-white);
        flex-direction: column;
        padding: 40px 20px;
        transition: left 0.3s ease-in-out;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
    }
    
    .nav-menu.active { left: 0; }
    .header-actions .btn { display: none; } /* Hide quote button in header on mobile */

    .hero h1 { font-size: 2.8rem; }
    .hero::after { display: none; } /* Remove angular decoration on mobile */
    .hero-btns { flex-direction: column; }

    .section-padding { padding: 50px 0; }
    .section-title { font-size: 2rem; }

    .stats-wrap {
        grid-template-columns: 1fr;
        padding: 20px;
        margin-top: 0;
        border-bottom: none;
        border-top: 4px solid var(--color-orange);
    }
    .stat-item {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 20px 0;
    }
    .stat-item:last-child { border-bottom: none; padding-bottom: 0; }

    .footer-top { grid-template-columns: 1fr; gap: 30px; }

    .floating-actions { bottom: 20px; right: 20px; }
    
    .modal-content { padding: 25px; margin: 20px; width: auto; }
}

/* Extra Small Phones */
@media (max-width: 480px) {
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    .projects-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .btn { width: 100%; }
}
