/*
        File: style.css
        Purpose: Landing menu with two photo panels that route users to
        construction or company worker transportation pages.
    */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Poppins:wght@300;600&display=swap');

    :root {
        --overlay: rgba(0, 0, 0, 0.4);
        --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body, html {
        height: 100%;
        font-family: 'Poppins', sans-serif;
        background-color: #000;
        overflow: hidden;
    }

    .hero-wrapper {
        display: flex;
        height: 100vh;
        width: 100%;
    }

    .section {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        transition: var(--transition);
        color: white;
        text-decoration: none;
        overflow: hidden;
    }

    /* Split-screen photo backgrounds for the two main service choices. */
    .construction {
        background: linear-gradient(var(--overlay), var(--overlay)),
                    url('https://res.cloudinary.com/dx6dhuqw2/image/upload/f_auto,q_auto/JKWORLD/construction-Main.png');
        background-size: cover;
        background-position: center;
    }

    .transportation {
        background: linear-gradient(var(--overlay), var(--overlay)),
                    url("https://res.cloudinary.com/dx6dhuqw2/image/upload/f_auto,q_auto/JKWORLD/transportation-Main.png");
        background-size: cover;
        background-position: center;
    }

    .section:hover {
        flex: 1.4;
    }

    /* --- ATTRACTIVE TEXT STYLING --- */
    .content {
        z-index: 10;
        width: min(100%, 720px);
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Text is kept unframed so the photo stays clean on small screens. */
    .text-box {
        width: 100%;
        margin-bottom: 25px;
    }

    h1, p {
        /* Ensure text looks sharp */
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    h1 {
        font-family: 'Montserrat', sans-serif; /* Thick, bold font */
        font-size: clamp(2.5rem, 6vw, 3rem);
        text-transform: uppercase;
        letter-spacing: 8px; /* High-end spacing */
        margin-bottom: 5px;
        font-weight: 900;
        /* Subtle glow to make text pop */
        text-shadow: 0 10px 30px rgba(0,0,0,0.8);
        line-height: 1.1;
    }

    p {
        font-size: 1.1rem;
        margin-bottom: 35px;
        font-weight: 300;
        letter-spacing: 3px;
        text-transform: uppercase;
        opacity: 0.8;
        color: #ddd;
    }
    .btn {
        display: inline-block;
        padding: 18px 50px;
        /* Solid Orange Color */
        background-color: #E26A1A;
        color: white;
        border: none;
        text-decoration: none;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 0.85rem;
        border-radius: 50px;
        /* This makes the zoom smooth */
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
    }

    .btn:hover {
        background-color: #e65c00; /* Slightly darker orange on hover */
        /* THE ZOOM EFFECT */
        transform: scale(1.15);
        cursor: pointer;
    }

    /* Section Divider Line (Optional nice touch) */
    .section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 4px;
        background: white;
        transition: var(--transition);
    }

    .section:hover::after {
        width: 100px;
    }

    @media (max-width: 768px) {
        .hero-wrapper { flex-direction: column; }
        .section {
            flex: 1 1 0;
            min-height: 0;
            height: auto;
            padding: 18px 0;
        }

        .section:hover,
        .section:focus-within,
        .section:active,
        .section.is-active {
            flex: 1.45 1 0;
        }

        .hero-wrapper.has-active .section:not(.is-active),
        .hero-wrapper:has(.section.is-active) .section:not(.is-active) {
            flex: 0.82 1 0;
        }

        .section:hover::after,
        .section:focus-within::after,
        .section:active::after,
        .section.is-active::after {
            width: 90px;
        }

        .section:active .btn,
        .section:focus-within .btn,
        .section.is-active .btn {
            transform: scale(1.06);
        }

        .content {
            width: 100%;
            padding: 18px;
        }

        .text-box {
            margin-bottom: 20px;
        }

        h1 {
            max-width: 100%;
            font-size: clamp(2rem, 10vw, 2.7rem);
            letter-spacing: clamp(1px, 1.2vw, 4px);
            overflow-wrap: anywhere;
        }

        p {
            max-width: min(100%, 360px);
            margin: 0 auto 28px;
            font-size: clamp(0.82rem, 3.2vw, 1rem);
            letter-spacing: clamp(1px, 0.9vw, 3px);
            line-height: 1.6;
        }

        .btn {
            width: min(100%, 350px);
            padding: 18px 28px;
            font-size: 0.86rem;
        }
    }

    @media (max-width: 420px) {
        h1 {
            font-size: clamp(1.75rem, 9.4vw, 2.3rem);
            letter-spacing: 1px;
        }

        p {
            max-width: 330px;
            font-size: 0.78rem;
            letter-spacing: 1.5px;
        }
    }