<template>
    <div>
        <div class="procurement align-items-center width-80 m-auto">
            <div class="bg-F4F4F4 pa-2 border-box">
                <div class="casemessage">
                    <div class="casemessage-left">
                        <h3>Fairmont Empress Hotel</h3>
                        <div class="message">
                            <p class="item"><strong>Address: </strong>721 Government St, Victoria, BC V8W 1W5,Canada</p>
                            <p class="item"><strong>Type: </strong>Hotel</p>
                            <p class="item"><strong>Solutions: </strong>Furniture,Fixtures＆Equipment, lights fixture</p>
                        </div>
                        <p class="button-left">Get Aa Free Quote ></p>
                    </div>
                    <div class="casemessage-right">
                        <img src="../assets/img/Installwoodenflooring.jpg" alt="Installwoodenflooring"
                            class="width-100 height-100 imgcase">
                    </div>
                </div>
            </div>
        </div>
        <div class="details">
            <h2>DETAILS</h2>
            <p class="details-message">Oppein Home, the largest cabinet manufacturer in Asia, will supply high-end cabinetry
                and joinery for the
                AURA residential development by Aqualand, an Australian property, hospitality and investment company.
                This is the second collaboration between Oppein Home and Aqualand, and it turns out to be an impressive
                achievement for both companies.</p>
            <img src="../assets/img/Installwoodenflooring.jpg" alt="Install wooden flooring" class="width-100">
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.casemessage {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    overflow: hidden;

    .casemessage-left {
        width: 40%;
        font-size: 26px;

        .message {
            margin-top: 5vw;
            font-size: 16px;

            .item {
                margin: 10px 0;
                color: #888;
            }
        }

        .button-left {
            cursor: pointer;
            padding: 10px 20px;
            background-color: #fa8106;
            float: left;
            margin-top: 5vw;
            font-size: 16px;
            color: #fff;
        }
    }

    .casemessage-right {
        width: 45%;
        height: 20vw;
        overflow: hidden;

        img {
            transition: all 3s;
        }
    }

    .casemessage-right:hover img {
        transform: scale(1.1);
    }
}

.details {
    width: 80%;
    margin: 20px auto;
    text-align: center;

    .details-message {
        margin: 20px 0;
        text-align: left;
    }
}

@media screen and (max-width: 960px) {
    .casemessage-left {
        background-color: pink;
        font-size: 14px;
    }

    .casemessage-right {
        width: 50vw;
        height: 50vw;

        .imgcase {
            width: 50vw;
            height: 50vw;
        }
    }
}</style>