/* Disable heavy parallax on small screens */
@media only screen
and (max-device-width: 460px)
and (max-device-width: 960px)
and (max-device-width: 834px)
and (max-device-width: 1194px) {
    .diagonal-bg {
        transform: none;
        left: -10%;
        top: -10%;
        width: 120%;
        height: 120%;
        /* Keep background stable while scrolling on mobile */
        background-attachment: scroll;
        /* Slightly scale out the image so more detail is visible */
        background-size: 120% auto;
        background-position: center center;
        will-change: auto;
    }
    
    .diagonal-parallax::before,
    .diagonal-parallax::after {
        content: '';
        position: absolute;
        left: -60%;
        width: 220%;
        height: 330px;
        transform-origin: center;
        z-index: 3;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        pointer-events: none;
    }

    .diagonal-parallax::before {
        /* top separator: move further up so its fill reaches the container above */
        top: -225px;
        transform: rotate(var(--diagonal-angle));
        background: var(--sep-top-fill, #ffffff);
    }

    .diagonal-parallax::after {
        /* bottom separator: move further down so its fill reaches the container below (extra 100px) */
        bottom: -225px;
        transform: rotate(var(--diagonal-angle));
        background: var(--sep-bottom-fill, var(--section-sep-bg));
    }

    .diagonal-content {
        position: relative;
        z-index: 2;
        text-align: center;
        /* padding: 1rem 1rem; /* reduced vertical padding */
    }
}

/* Responsive Landscape */
@media only screen
and (max-device-width: 460px)
and (max-device-width: 960px)
and (max-device-width: 834px)
and (max-device-width: 1194px) {
    .hero-text h1 {
        font-size: 2.5rem;
    }
    
    .hero-text p {
        font-size: 1.1rem;
    }
    
    .services h2, .about h2, .contact h2 {
        font-size: 2rem;
        color: black;
    }
    
    .parallax-content h2 {
        font-size: 1rem;
    }
    
    .parallax-content p {
        font-size: 1.1rem;
    }
    
    .contact-form {
        padding: 2rem 1.5rem;
    }
    
    /* Disable parallax on mobile for better performance */
    .parallax-break {
        background-attachment: fixed;
    }
}