/* ================================================
   STRUXCORE CUSTOM CONSTRUCTION - MOBILE STYLES
   ================================================ */

@media (max-width: 768px) {

    /* NAVIGATION */
    nav {
        padding: 10px 20px;
        flex-wrap: wrap;
        position: relative;
    }

    nav img {
        height: 50px;
    }

    .hamburger {
        display: flex;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0;
        background-color: #1a1a1a;
        padding: 10px 0;
        margin-top: 10px;
    }

    nav ul.open {
        display: flex;
    }

    nav ul li {
        width: 100%;
        text-align: center;
        border-top: 1px solid #2e2e2e;
    }

    nav ul li a {
        display: block;
        padding: 15px 20px;
        font-size: 15px;
    }

    /* PAGE HEADER */
    .page-header {
        padding: 40px 20px;
    }

    .page-header h1 {
        font-size: 32px;
    }

    .page-header p {
        font-size: 15px;
    }

    /* HERO */
    .hero {
        height: auto;
        min-height: 400px;
        padding: 40px 20px;
    }

    .hero-content {
        padding: 25px 20px;
        width: 100%;
    }

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

    .hero-content p {
        font-size: 16px;
    }

    .hero-content a {
        font-size: 15px;
        padding: 12px 20px;
    }

    /* SERVICES GRID */
    .services {
        padding: 40px 20px;
    }

    .services h2 {
        font-size: 28px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    /* SERVICE BLOCKS */
    .services-section {
        padding: 40px 20px;
    }

    .service-block {
        flex-direction: column;
        gap: 15px;
    }

    .service-icon {
        min-width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .service-info h2 {
        font-size: 22px;
    }

    /* GALLERY */
    .gallery {
        padding: 40px 20px;
    }

    .gallery h2 {
        font-size: 24px;
    }

    .before-after-grid {
        grid-template-columns: 1fr;
    }

    .photo-card img {
        height: 220px;
    }

    .placeholder-img {
        height: 220px;
    }

    /* FORMS */
    .quote-section,
    .contact-form-section {
        padding: 40px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .submit-btn {
        width: 100%;
        text-align: center;
    }

    /* CONTACT SECTION */
    .contact-section {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 40px;
    }

    /* CTA */
    .cta {
        padding: 40px 20px;
    }

    .cta h2 {
        font-size: 28px;
    }

    .cta a {
        display: block;
        text-align: center;
        padding: 15px 20px;
    }

    /* WHY GRID */
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* CUSTOMER GRID */
    .customer-grid {
        grid-template-columns: 1fr;
    }
}
/* TOOLS LOGIN MOBILE */
@media (max-width: 768px) {
    .login-box {
        margin: 20px;
        padding: 35px 25px;
    }

    /* DASHBOARD MOBILE */
    .dashboard-body {
        padding: 30px 20px;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .quick-links {
        gap: 10px;
    }

    .quick-link {
        font-size: 13px;
        padding: 8px 14px;
    }

    header {
        padding: 15px 20px;
    }
}
/* INVOICE GENERATOR MOBILE */
@media (max-width: 768px) {
    .invoice-main,
    .main {
        grid-template-columns: 1fr;
    }

    .left-panel {
        border-right: none;
        border-bottom: 1px solid var(--dark3);
        max-height: none;
        overflow-y: visible;
    }

    .right-panel {
        padding: 20px;
    }

    .invoice-top {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px;
    }

    .invoice-meta {
        text-align: left;
    }

    .invoice-parties {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .invoice-footer-grid {
        grid-template-columns: 1fr;
    }

    .invoice-sig {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .customer-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .line-item-grid {
        grid-template-columns: 1fr 1fr;
    }

    .action-buttons {
        flex-direction: column;
    }

    .totals-box {
        min-width: unset;
        width: 100%;
    }
}