@media (max-width: 900px) {
    .color-grid,
    .paint-detail-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-content {
        grid-template-columns: 1fr;
    }

    .product-hero h1 {
        font-size: 2.1rem;
    }
}

@media (max-width: 850px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-page h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .featured-products h2 {
        display: none;
    }

    body {
        padding-bottom: 90px;
    }



    .header-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 14px;
        position: relative;
    }

    .years,
    .bbb {
        display: none;
    }

    .logo {
        justify-self: auto;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .logo img {
        height: 52px;
        width: auto;
    }

    .logo a {
        align-items: flex-start;
        line-height: 1;
    }

    .company-name {
        font-size: 22px;
        white-space: normal;
    }

    .subtext {
        font-size: 14px;
        white-space: normal;
    }

    nav .hamburger {
        display: block;
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1100;
    }

nav .menu {
    flex-direction: column;
    display: none;
    background-color: #000;
    position: absolute;
    top: 78px;
    left: 12px;
    right: 12px;

    max-height: 70vh;
    overflow-y: auto;

    border: 1px solid rgba(212,160,52,.2);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    z-index: 1000;
}

    nav .menu.show {
        display: flex;
    }

    .hero {
        height: 420px;
    }

    .hero-content h1 {
        font-size: 36px;
        line-height: 1.15;
    }

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

    .hero-content .btn {
        padding: 14px 24px;
        font-size: 16px;
    }

    .featured-products .product-grid,
    .services .services-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .product-item,
    .service-item {
        width: 92%;
        max-width: 340px;
    }

    .page-title {
        padding: 42px 0 36px;
    }

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

    .page-title p,
    .paint-intro p,
    .paint-supplier p,
    .paint-cta p,
    .paint-detail-box p,
    .color-card p {
        font-size: 16px;
    }

    .color-grid,
    .paint-detail-grid {
        grid-template-columns: 1fr;
    }

    .color-swatch {
        height: 120px;
    }

    .paint-options h2 {
        font-size: 26px;
    }

    .testimonials-page h1 {
        font-size: 2.3rem;
    }

    .reviews-cta h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 700px) {
    .testimonials-page h1 {
        font-size: 2.1rem;
    }

    .reviews-cta h2 {
        font-size: 1.5rem;
    }
}
@media (max-width: 768px) {
    nav .submenu {
        display: none !important;
    }

    nav .dropdown > a .fa-caret-down {
        display: none;
    }
}